4
0
forked from crowetic/commerce
commerce/pages/index.tsx
2020-10-12 21:40:39 -03:00

93 lines
3.0 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products'
import { Layout } from '@components/core'
import { Grid, Marquee, Hero } from '@components/ui'
import { ProductCard } from '@components/product'
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
import { useEffect } from 'react'
import { useRouter } from 'next/router'
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>) {
const router = useRouter()
useEffect(() => {
router.prefetch('/search')
}, [])
return (
<div className="mt-3">
<Grid items={products.slice(0, 3)} wrapper={ProductCard} />
<Marquee
items={products.slice(0, 3)}
wrapper={(p: any) => <ProductCard {...p} variant="slim" />}
/>
<Hero
headline="Release Details: The Yeezy BOOST 350 V2 Natural'"
description="
The Yeezy BOOST 350 V2 lineup continues to grow. We recently had the
Carbon iteration, and now release details have been locked in for
this Natural joint. Revealed by Yeezy Mafia earlier this year, the
shoe was originally called Abez, which translated to Tin in
Hebrew. Its now undergone a name change, and will be referred to as
Natural."
/>
<Grid items={products.slice(3, 6)} layout="B" wrapper={ProductCard} />
<Marquee
items={[...products.slice(3, 6)]}
variant="secondary"
wrapper={(p: any) => <ProductCard {...p} variant="slim" />}
/>
<div className="py-12 flex flex-row w-full">
<div className="pr-3 w-48">
<ul className="mb-10">
<li className="py-1 text-primary font-bold tracking-wide">
All Categories
</li>
{categories.map((cat) => (
<li key={cat.path} className="py-1 text-secondary">
<a href="#">{cat.name}</a>
</li>
))}
</ul>
<ul className="">
<li className="py-1 text-primary font-bold tracking-wide">
All Designers
</li>
{brands.flatMap(({ node }) => (
<li key={node.path} className="py-1 text-secondary">
<a href="#">{node.name}</a>
</li>
))}
</ul>
</div>
<div className="flex-1">
<Grid
items={[
...products.slice(6),
...products.slice(6),
...products.slice(6),
]}
layout="normal"
wrapper={ProductCard}
/>
</div>
</div>
</div>
)
}
Home.Layout = Layout