mirror of
https://github.com/vercel/commerce.git
synced 2025-03-31 17:25:53 +00:00
6c2610584d
* Update product types * Cart types progress, add zod & initial schema validator * Update normalize.ts * Update with-schema-parser.ts * Updated types, schemas & providers * Fix providers after schema parse errors * Fix paths * More provider fixes * Fix kibocommerce & commercejs * Add customer updated types & fixes * Add checkout & customer types * Import core types only from commerce * Update tsconfig.json * Convert hooks interfaces to types * Requested changes * Change to relative paths * Move Zod dependency
75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
import { FC } from 'react'
|
|
import Link from 'next/link'
|
|
import type { Product } from '@commerce/types/product'
|
|
import { Grid } from '@components/ui'
|
|
import { ProductCard } from '@components/product'
|
|
import s from './HomeAllProductsGrid.module.css'
|
|
import { getCategoryPath, getDesignerPath } from '@lib/search'
|
|
import { Brand, Category } from '@commerce/types/site'
|
|
|
|
interface Props {
|
|
categories?: Category[]
|
|
brands?: Brand[]
|
|
products?: Product[]
|
|
}
|
|
|
|
const HomeAllProductsGrid: FC<Props> = ({
|
|
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?.map(({ path, name }) => (
|
|
<li key={path} className="py-1 text-accent-8 text-base">
|
|
<Link href={getDesignerPath(path)}>
|
|
<a>{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>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default HomeAllProductsGrid
|