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 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>
|
||||
)
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
|
Loading…
x
Reference in New Issue
Block a user