Skip to content

Commit

Permalink
product layout cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@bufleek
bufleek committed Nov 24, 2023
1 parent 1c7a63a commit f1b77bc
Show file tree
Hide file tree
Showing 6 changed files with 1,825 additions and 100 deletions.
3 changes: 1 addition & 2 deletions app/browse/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
import { useContext } from "react";
import { useSearchParams } from "next/navigation";
import AppBar from "@/components/app-bar/app-bar";
import SearchInput from "@/components/products/search-input";
import { AppConfigsContext } from "@/components/providers";
import ProductSection from "@/components/products/product-section";

Expand All @@ -20,9 +19,9 @@ export default function Browse() {
}}
>
<AppBar />

<div className="h-full bg-white">
<div className="py-1 mt-4">
<SearchInput initialValue={query ?? ""} />
</div>
<div className="flex flex-col gap-16 pb-20">
{appConfigs?.data_source?.platforms?.map((platform: any) => {
Expand Down
4 changes: 2 additions & 2 deletions components/app-bar/app-bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ export default function AppBar() {
<div className="flex justify-between items-center py-6 md:justify-start md:space-x-10">
<div className="flex justify-start lg:w-0 lg:flex-1">
<a href="/">
<span className="sr-only">Workflow</span>
<Image src="/logo.svg" alt="Workflow" width={40} height={40} />
<span className="sr-only">Logo</span>
<Image src="/logo.svg" alt="Logo" width={40} height={40} />
</a>
</div>
<nav className="hidden md:flex space-x-10">
Expand Down
157 changes: 101 additions & 56 deletions components/products/product-section.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,71 +2,116 @@ import { useState, useEffect } from "react";
import { Platform } from "@/data/models/app_configs";
import { Product } from "@/data/models/products";
import { getProducts } from "@/data/models/products";
import {
Box,
Card,
Container,
Grid,
Icon,
Link,
Stack,
Typography,
} from "@mui/material";
import StarBorderIcon from "@mui/icons-material/StarBorder";

export default function ProductSection({ platform, query, base_url}: { platform: Platform, query: string | null, base_url: string | null}) {
export default function ProductSection({
platform,
query,
base_url,
}: {
platform: Platform;
query: string | null;
base_url: string | null;
}) {
const [products, setProducts] = useState<Product[] | null[]>([]);

useEffect(() => {
if (query && base_url) {
getProducts({platform, query, base_url}).then((productList) => {
getProducts({ platform, query, base_url }).then((productList) => {
setProducts(productList.products);
console.log(productList.products.length);
});
}
}
, []);

return (
<div className="bg-white">
<div className="mx-auto max-w-2xl px-4 sm:px-6 lg:max-w-7xl lg:px-8">
<div className="flex justify-between items-center mb-4">
<h2 className="text-xl font-medium text-gray-800">{platform.name}</h2>
<a href="#" className="text-gray-500 hover:text-gray-600">
See All
</a>
</div>
}, []);

<div className="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
{[...products, ...products].map((product) => (
<a key={product?.link} href={product?.link} className="group" style={{
display: "grid",
gridTemplateRows: "1fr max-content",
}}>
<div className="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-h-8 xl:aspect-w-7">
<img
src={product?.image}
alt={product?.name}
className="h-full w-full object-cover object-center group-hover:opacity-75"
/>
</div>
<div>
<h3 className="mt-4 text-sm text-gray-700 truncate w-full">
{product?.name}
</h3>
return (
<>
<Container maxWidth="lg">
<Stack direction="column">
<Stack direction="row" justifyContent="space-between" py={4}>
<Typography variant="h5" component="h2" px={0}>
{platform.name}
</Typography>
<Typography component="h2">See all</Typography>
</Stack>

<div className="flex justify-between items-center mt-2">
<p className="mt-1 text-lg font-medium text-gray-900">
{product?.price?.currency}{product?.price?.amount}
</p>
<div className="flex space-x-1 text-sm align-center">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="20"
height="20"
className="fill-current text-orange-500"
>
<title>Rating</title>
<path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" />
</svg>
5.0
</div>
</div>
</div>
</a>
))}
</div>
</div>
</div>
<Grid container spacing={1}>
{products.map((product) => (
<Grid item xs={12} sm={6} md={4} lg={3} key={product?.link}>
<Link href={product?.link} underline="none" target="_blank">
<Card
sx={{
height: "100%",
}}
>
<Box mt={2}>
<img src={product?.image} alt={product?.name} />
</Box>
<Box px={2} pb={2}>
<Typography variant="body2" component="p" py={1}>
{product?.name}
</Typography>
<Stack direction="row" justifyContent="space-between">
<Stack>
{product?.old_price && (
<Typography
variant="caption"
component="span"
sx={{
textDecoration: "line-through",
color: "text.disabled",
}}
>
{product?.price.currency}
{product?.old_price.amount ??
product?.old_price?.amount_range}
</Typography>
)}
<Typography
variant="subtitle1"
component="h2"
fontWeight={600}
>
{product?.price.currency}
{product?.price.amount ??
product?.price?.amount_range}
</Typography>
</Stack>
{product?.rating && product?.reviews && (
<Stack direction="row">
<Box>
<Typography variant="caption" component="span">
{product?.rating}
</Typography>
</Box>
<Box>
<StarBorderIcon fontSize="small" />
</Box>
<Box>
<Typography variant="caption" component="span">
{product?.reviews}
</Typography>
</Box>
</Stack>
)}
</Stack>
</Box>
</Card>
</Link>
</Grid>
))}
</Grid>
</Stack>
</Container>
</>
);
}
Loading

0 comments on commit f1b77bc

Please sign in to comment.