Another Grid - More Items to the Store

components/product/ProductCard/ProductCard.tsx

@@ -21,11 +21,9 @@ const ProductCard: FC<Props> = ({ className, node: productData }) => {
   return (
     <div
       className={rootClassName}
-      style={
-        {
-          // backgroundImage: `url('${productData.images.edges[0].node.urlSmall}')`,
-        }
-      }
+      style={{
+        backgroundImage: `url('${productData.images.edges[0].node.urlSmall}')`,
+      }}
     >
       <div className="flex flex-row justify-between box-border w-full z-10 relative">
         <div className="flex flex-col flex-1 overflow-hidden">

components/ui/Grid/Grid.module.css

@@ -13,6 +13,15 @@
   }
 }
 
+.layoutNormal {
+  @apply gap-6;
+
+  & > * {
+    min-height: 325px;
+    @apply bg-white;
+  }
+}
+
 .layoutA {
   & > div:nth-child(6n + 1),
   & > div:nth-child(6n + 5) {

components/ui/Grid/Grid.tsx

@@ -6,7 +6,7 @@ interface Props {
   className?: string
   children?: any
   items: [any] | any
-  layout?: 'A' | 'B' | 'C' | 'D'
+  layout?: 'A' | 'B' | 'C' | 'D' | 'normal'
   wrapper?: ReactNode | Component | any
 }
 
@@ -25,6 +25,7 @@ const Grid: FC<Props> = ({
       [s.layoutB]: layout === 'B',
       [s.layoutC]: layout === 'C',
       [s.layoutD]: layout === 'D',
+      [s.layoutNormal]: layout === 'normal',
     },
     className
   )