forked from crowetic/commerce
ProductGrid builds a massive infinite grid
This commit is contained in:
parent
cf620b4fb3
commit
3d3b0f34a9
@ -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>
|
||||||
)
|
)
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
|
Loading…
x
Reference in New Issue
Block a user