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

53 lines
1.5 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 15:16:56 -03:00
import { Grid, Marquee } from '@components/ui'
2020-09-30 13:36:02 -05:00
export async function getStaticProps({ preview }: GetStaticPropsContext) {
2020-10-01 20:40:40 -05:00
const { products } = await getAllProducts()
2020-09-30 13:36:02 -05:00
return {
2020-10-04 15:16:56 -03:00
props: { products },
2020-10-01 20:40:40 -05:00
}
2020-09-30 13:36:02 -05:00
}
export default function Home({
products,
}: InferGetStaticPropsType<typeof getStaticProps>) {
return (
<>
2020-10-04 15:16:56 -03:00
<Grid items={products.slice(0, 3)} />
<Marquee
items={products.slice(0, 3)}
wrapper={(p: any) => (
<div className="flex flex-1 justify-end">
<img
className="w-full"
src={p.node.images.edges[0].node.urlSmall}
/>
<span className="bg-black text-white inline-block p-3 font-bold text-2xl break-words">
{p.node.name}
</span>
</div>
)}
/>
2020-10-04 15:16:56 -03:00
<Grid items={products.slice(3, 6)} layout="B" />
<Marquee
variant="secondary"
items={products.slice(0, 3)}
wrapper={() => (
<div className="flex flex-1">
<h3 className="bg-black text-white inline p-3 font-bold text-2xl">
This is a very short title
</h3>
</div>
)}
/>
<div className="bg-black">
<h2 className=""> A very long title with a nice description</h2>
</div>
</>
)
2020-09-30 11:44:38 -05:00
}
2020-10-01 21:30:08 -05:00
Home.Layout = Layout