ProductGrid builds a massive infinite grid

This commit is contained in:
Belen Curcio 2020-10-03 11:33:31 -03:00
parent cf620b4fb3
commit 3d3b0f34a9
3 changed files with 28 additions and 16 deletions

View File

@ -39,10 +39,10 @@ const ProductCard: FC<Props> = ({ className, productData }) => {
</div>
<div className="absolute top-0 left-0 w-full h-full z-0">
<img
{/* <img
className="object-cover object-center w-full"
src={productData.images.edges[0].node.urlSmall}
/>
/> */}
</div>
</div>
)

View File

@ -1,29 +1,26 @@
.root {
@apply grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-4 w-full h-96;
min-height: calc((100vh - 80px - 56px) * 2);
--row-height: calc(100vh - 80px - 56px);
@apply grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-4 w-full;
& > * {
@apply row-span-1 lg:col-span-1 h-full bg-black box-border;
}
& > div:nth-child(1),
& > div:nth-child(5) {
@apply row-span-2 lg:col-span-2 h-full;
& > div:nth-child(6n + 1) {
@apply row-span-2 lg:col-span-2 bg-violet;
min-height: var(--row-height);
}
& > div:nth-child(1) {
@apply bg-violet;
& > div:nth-child(6n + 5) {
@apply row-span-2 lg:col-span-2 bg-blue;
min-height: var(--row-height);
}
& > div:nth-child(3) {
& > div:nth-child(6n + 3) {
@apply bg-pink;
}
& > div:nth-child(5) {
@apply bg-blue;
}
& > div:nth-child(6) {
& > div:nth-child(6n + 6) {
@apply bg-cyan;
}
}

View File

@ -13,7 +13,22 @@ export async function getStaticProps({ preview }: GetStaticPropsContext) {
export default function Home({
products,
}: InferGetStaticPropsType<typeof getStaticProps>) {
return <ProductGrid products={products} />
return (
<>
<ProductGrid
products={[
...products,
...products,
...products,
...products,
...products,
...products,
]}
/>
<div>asdsasad</div>
<ProductGrid products={products.slice(3)} />
</>
)
}
Home.Layout = Layout