From b9069859a130926cf9278192b7dc64683b8ce824 Mon Sep 17 00:00:00 2001 From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com> Date: Wed, 16 Oct 2024 22:04:23 +0200 Subject: [PATCH 1/2] productCard observes style prop --- app/components/hydrogen/ProductCard.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/components/hydrogen/ProductCard.jsx b/app/components/hydrogen/ProductCard.jsx index f3c9a48..16a505e 100644 --- a/app/components/hydrogen/ProductCard.jsx +++ b/app/components/hydrogen/ProductCard.jsx @@ -10,6 +10,7 @@ import Link from '@h2/Link' export function ProductCard({ product, className, + style, loading, onClick, quickAdd, @@ -56,6 +57,7 @@ export function ProductCard({ 'flex w-full flex-col gap-2', className, )} + style={style} > <Link onClick={onClick} From 4c319c281f365ac802571fd4e3ad14140abbea23 Mon Sep 17 00:00:00 2001 From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com> Date: Wed, 16 Oct 2024 22:04:36 +0200 Subject: [PATCH 2/2] turning the BestSellers grid into inline style based --- app/routes/_index/sections/best-sellers.jsx | 52 +++++++++++++++------ 1 file changed, 39 insertions(+), 13 deletions(-) diff --git a/app/routes/_index/sections/best-sellers.jsx b/app/routes/_index/sections/best-sellers.jsx index 8fcfa2a..aa22ada 100644 --- a/app/routes/_index/sections/best-sellers.jsx +++ b/app/routes/_index/sections/best-sellers.jsx @@ -38,38 +38,64 @@ export default function BestSellers() { </Heading> </Container> <Container> - <Grid - columns={12} - rows={10} - gapY='xl' - gap='l' - className='aspect-[5/7]' + <div + style={{ + display: 'grid', + gridTemplateColumns: + 'repeat(12, minmax(0, 1fr))', + gridTemplateRows: 'repeat(10, minmax(0, 1fr))', + columnGap: 32, + rowGap: 48, + aspectRatio: '5/7', + justifyContent: 'flex-start', + alignItems: 'flex-start', + }} > <ProductCard product={products[0]} - className='col-span-5 col-start-1 row-start-1 pr-12' + className='pr-12' + style={{ + gridColumn: '1 / 6', + gridRow: '1', + }} /> <ProductCard product={products[1]} - className='col-span-3 col-start-7 row-start-2' + style={{ + gridColumn: '7 / 10', + gridRow: '2', + }} /> <ProductCard product={products[2]} - className='col-span-3 col-start-10 row-start-1' + style={{ + gridColumn: '10 / 13', + gridRow: '1', + }} /> <ProductCard product={products[3]} - className='col-span-3 col-start-1 row-start-6' + style={{ + gridColumn: '1 / 4', + gridRow: '6', + }} /> <ProductCard product={products[4]} - className='col-span-3 col-start-4 row-start-5' + style={{ + gridColumn: '4 / 7', + gridRow: '5', + }} /> <ProductCard product={products[5]} - className='col-span-4 col-start-9 row-start-5 mt-8' + className='mt-8' + style={{ + gridColumn: '9 / 13', + gridRow: '5', + }} /> - </Grid> + </div> </Container> </Section> )