cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

ProductGrid builds a massive infinite grid

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/product/ProductCard/ProductCard.tsx
View File

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

23
components/product/ProductGrid/ProductGrid.module.css
View File

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

17
pages/index.tsx
View File

@ -13,7 +13,22 @@ export async function getStaticProps({ preview }: GetStaticPropsContext) {
export default function Home({ export default function Home({
products, products,
}: InferGetStaticPropsType<typeof getStaticProps>) { }: 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 Home.Layout = Layout