4
0
forked from crowetic/commerce
commerce/pages/search.tsx

83 lines
2.5 KiB
TypeScript
Raw Normal View History

2020-10-12 10:25:36 -03:00
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products'
2020-10-13 03:49:24 -05:00
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
import useSearch from '@lib/bigcommerce/products/use-search'
2020-10-12 10:25:36 -03:00
import { Layout } from '@components/core'
2020-10-13 03:49:24 -05:00
import { Grid } from '@components/ui'
2020-10-12 10:25:36 -03:00
import { ProductCard } from '@components/product'
2020-10-12 11:10:20 -03:00
import { useRouter } from 'next/router'
2020-10-12 10:25:36 -03:00
export async function getStaticProps({ preview }: GetStaticPropsContext) {
const { products } = await getAllProducts()
const { categories, brands } = await getSiteInfo()
return {
props: { products, categories, brands },
}
}
export default function Home({
products,
categories,
brands,
}: InferGetStaticPropsType<typeof getStaticProps>) {
2020-10-12 11:10:20 -03:00
const router = useRouter()
2020-10-13 03:49:24 -05:00
const search = useSearch({ search: router.query.search as string })
console.log('SEARCH', search)
2020-10-12 10:25:36 -03:00
return (
<div className="grid grid-cols-12 gap-8 mt-3 mb-20">
<div className="col-span-2">
<ul className="mb-10">
2020-10-12 21:40:39 -03:00
<li className="py-1 text-primary font-bold tracking-wide">
2020-10-12 10:25:36 -03:00
All Categories
</li>
{categories.map((cat) => (
2020-10-12 21:40:39 -03:00
<li key={cat.path} className="py-1 text-secondary">
2020-10-12 10:25:36 -03:00
<a href="#">{cat.name}</a>
</li>
))}
</ul>
<ul>
2020-10-12 21:40:39 -03:00
<li className="py-1 text-primary font-bold tracking-wide">
2020-10-12 10:25:36 -03:00
All Designers
</li>
{brands.flatMap(({ node }) => (
2020-10-12 21:40:39 -03:00
<li key={node.path} className="py-1 text-secondary">
2020-10-12 10:25:36 -03:00
<a href="#">{node.name}</a>
</li>
))}
</ul>
</div>
<div className="col-span-8">
<div className="mb-12">
2020-10-12 11:10:20 -03:00
Showing 8 results for "<strong>{router.query.q}</strong>"
2020-10-12 10:25:36 -03:00
</div>
<Grid
items={[
...products.slice(6),
...products.slice(6),
...products.slice(6),
]}
layout="normal"
wrapper={ProductCard}
/>
</div>
<div className="col-span-2">
<ul>
2020-10-12 21:40:39 -03:00
<li className="py-1 text-primary font-bold tracking-wide">
Relevance
</li>
<li className="py-1 text-secondary">Latest arrivals</li>
<li className="py-1 text-secondary">Trending</li>
<li className="py-1 text-secondary">Price: Low to high</li>
<li className="py-1 text-secondary">Price: High to low</li>
2020-10-12 10:25:36 -03:00
</ul>
</div>
</div>
)
}
Home.Layout = Layout