1
0
mirror of https://github.com/vercel/commerce.git synced 2025-07-26 11:41:23 +00:00
Files
.vscode
assets
components
auth
cart
checkout
common
Avatar
FeatureBar
Footer
Head
HomeAllProductsGrid
HomeAllProductsGrid.module.css
HomeAllProductsGrid.tsx
index.ts
I18nWidget
Layout
Navbar
Searchbar
SidebarLayout
UserNav
index.ts
icons
product
ui
wishlist
config
framework
lib
pages
public
.editorconfig
.env.template
.gitignore
.prettierignore
.prettierrc
README.md
codegen.json
commerce.config.json
global.d.ts
license.md
next-env.d.ts
next.config.js
package.json
postcss.config.js
tailwind.config.js
tsconfig.json
yarn.lock
commerce/components/common/HomeAllProductsGrid/HomeAllProductsGrid.tsx
2021-05-27 14:23:55 -03:00

74 lines
2.0 KiB
TypeScript

import { FC } from 'react'
import Link from 'next/link'
import type { Product } from '@commerce/types'
import { Grid } from '@components/ui'
import { ProductCard } from '@components/product'
import s from './HomeAllProductsGrid.module.css'
import { getCategoryPath, getDesignerPath } from '@lib/search'
interface Props {
categories?: any
brands?: any
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.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>
</div>
</div>
)
}
export default HomeAllProductsGrid