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

92 lines
3.0 KiB
TypeScript
Raw Normal View History

2020-10-01 20:40:40 -05:00
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
2020-10-02 14:51:36 -03:00
import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products'
2020-10-01 20:40:40 -05:00
import { Layout } from '@components/core'
2020-10-04 16:34:22 -03:00
import { Grid, Marquee, Hero } from '@components/ui'
import { ProductCard } from '@components/product'
2020-10-08 18:48:28 -05:00
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
2020-10-14 22:30:26 -05:00
import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
2020-09-30 13:36:02 -05:00
export async function getStaticProps({ preview }: GetStaticPropsContext) {
2020-10-14 22:30:26 -05:00
const { pages } = await getAllPages()
2020-10-01 20:40:40 -05:00
const { products } = await getAllProducts()
2020-10-10 14:19:05 -05:00
const { categories, brands } = await getSiteInfo()
2020-10-05 11:44:14 -03:00
2020-09-30 13:36:02 -05:00
return {
2020-10-14 22:30:26 -05:00
props: { pages, products, categories, brands },
2020-10-01 20:40:40 -05:00
}
2020-09-30 13:36:02 -05:00
}
export default function Home({
products,
2020-10-08 18:48:28 -05:00
categories,
2020-10-10 14:19:05 -05:00
brands,
2020-09-30 13:36:02 -05:00
}: InferGetStaticPropsType<typeof getStaticProps>) {
return (
2020-10-12 10:46:17 -03:00
<div className="mt-3">
2020-10-16 12:46:02 -03:00
<Grid>
{products.slice(0, 3).map((p: any) => (
<ProductCard key={p.id} {...p} />
))}
</Grid>
<Marquee variant="secondary">
{products.slice(0, 3).map((p: any) => (
<ProductCard key={p.id} {...p} variant="slim" />
))}
</Marquee>
2020-10-04 17:47:05 -03:00
<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."
/>
2020-10-16 12:46:02 -03:00
<Grid layout="B">
{products.slice(3, 6).map((p: any) => (
<ProductCard key={p.id} {...p} />
))}
</Grid>
<Marquee>
{products.slice(0, 3).map((p: any) => (
<ProductCard key={p.id} {...p} variant="slim" />
))}
</Marquee>
2020-10-13 08:53:05 -03:00
<div className="py-12 flex flex-row w-full px-12">
2020-10-08 18:48:28 -05:00
<div className="pr-3 w-48">
2020-10-12 10:58:41 -03:00
<ul className="mb-10">
2020-10-15 16:00:11 -03:00
<li className="py-1 text-base font-bold tracking-wide">
2020-10-12 10:58:41 -03:00
All Categories
2020-10-08 18:48:28 -05:00
</li>
{categories.map((cat) => (
2020-10-15 16:00:11 -03:00
<li key={cat.path} className="py-1 text-accents-8">
2020-10-08 18:48:28 -05:00
<a href="#">{cat.name}</a>
</li>
))}
</ul>
2020-10-12 10:58:41 -03:00
<ul className="">
2020-10-15 16:00:11 -03:00
<li className="py-1 text-base font-bold tracking-wide">
2020-10-12 10:58:41 -03:00
All Designers
2020-10-10 14:19:05 -05:00
</li>
{brands.flatMap(({ node }) => (
2020-10-15 16:00:11 -03:00
<li key={node.path} className="py-1 text-accents-8">
2020-10-10 14:19:05 -05:00
<a href="#">{node.name}</a>
</li>
))}
</ul>
2020-10-05 11:44:14 -03:00
</div>
<div className="flex-1">
2020-10-16 12:46:02 -03:00
<Grid layout="normal">
{products.map((p: any) => (
<ProductCard key={p.id} {...p} />
))}
</Grid>
2020-10-04 16:34:22 -03:00
</div>
2020-10-04 15:16:56 -03:00
</div>
2020-10-12 10:46:17 -03:00
</div>
)
2020-09-30 11:44:38 -05:00
}
2020-10-01 21:30:08 -05:00
Home.Layout = Layout