crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 20:26:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refractor

Browse Source
This commit is contained in:
gowarezzz
2021-08-19 09:50:38 +07:00
parent 0e7e7b7d5f
commit 0f82dfdcba
441 changed files with 191 additions and 81002 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
components/common/HomeAllProductsGrid/HomeAllProductsGrid.module.css
View File

@@ -1,23 +1,7 @@
.root {
@apply py-12 flex flex-col w-full px-6;
@apply flex flex-col w-full;
@screen md {
@apply flex-row;
}
& .asideWrapper {
@apply pr-3 w-full relative;
@screen md {
@apply w-48;
}
}
& .aside {
@apply flex flex-row w-full justify-around mb-12;
@screen md {
@apply mb-0 block sticky top-32;
}
}
}

68
components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx
View File

@@ -5,66 +5,40 @@ import { Grid } from '@components/ui'
import { ProductCard } from '@components/product'
import s from './HomeAllProductsGrid.module.css'
import { getCategoryPath, getDesignerPath } from '@lib/search'
import { Category } from '@commerce/types/site'
interface Props {
categories?: any
categories?: Category[]
brands?: any
products?: Product[]
}
const HomeAllProductsGrid: FC<Props> = ({
categories,
categories = [],
brands,
products = [],
}) => {
return (
<div className={s.root}>
<div className={s.asideWrapper}>
<div className={s.aside}>
<ul className="mb-10">
<li className="py-1 text-base font-bold tracking-wide">
<Link href={getCategoryPath('')}>
<a>All Categories</a>
</Link>
</li>
{categories.map((cat: any) => (
<li key={cat.path} className="py-1 text-accent-8 text-base">
<Link href={getCategoryPath(cat.path)}>
<a>{cat.name}</a>
</Link>
</li>
))}
</ul>
<ul className="">
<li className="py-1 text-base font-bold tracking-wide">
<Link href={getDesignerPath('')}>
<a>All Designers</a>
</Link>
</li>
{brands.flatMap(({ node }: any) => (
<li key={node.path} className="py-1 text-accent-8 text-base">
<Link href={getDesignerPath(node.path)}>
<a>{node.name}</a>
</Link>
</li>
))}
</ul>
</div>
</div>
<div className="flex-1">
<Grid layout="normal">
{products.map((product) => (
<ProductCard
key={product.path}
product={product}
variant="simple"
imgProps={{
width: 480,
height: 480,
}}
/>
))}
</Grid>
{categories.map((category) => (
<div>
<div className="text-primary font-bold">{category.name}</div>
<div className="flex">
{products.slice(0, 4).map((product) => (
<ProductCard
key={product.path}
product={product}
variant="simple"
imgProps={{
width: 300,
height: 300,
}}
/>
))}
</div>
</div>
))}
</div>
</div>
)