home: style products grid

components/home/index.js

@@ -13,7 +13,10 @@ export async function HomeProduct({ product }) {
     const collections = product?.collections?.nodes;
 
     return (
-        <Link href={`/product/${product?.handle}`}>
+        <Link
+            href={`/product/${product?.handle}`}
+            className={styles.homeProduct}
+        >
             <Image
                 src={featuredImage?.url}
                 alt={featuredImage?.altText}
@@ -31,6 +34,11 @@ export async function HomeProduct({ product }) {
     );
 }
 
+const productIsFeatured = product =>
+    product?.collections?.nodes
+        ?.map(collection => collection?.handle)
+        .includes('featured');
+
 //TODO: suspense
 export async function HomeProductsList({ collection }) {
     const products = await getCollectionProducts({
@@ -44,7 +52,14 @@ export async function HomeProductsList({ collection }) {
             ) : (
                 <ul className={styles.homeProductsList}>
                     {products?.map(product => (
-                        <li key={product?.handle}>
+                        <li
+                            key={product?.handle}
+                            className={
+                                productIsFeatured(product)
+                                    ? styles.featured
+                                    : null
+                            }
+                        >
                             <HomeProduct {...{ product }} />
                         </li>
                     ))}
@@ -60,14 +75,14 @@ export async function TypesNav() {
 
     return (
         <p className={styles.typesNav}>
-            <span className='filter'>Filter: </span>
+            <span className={styles.filter}>Filter: </span>
             {typesMenu?.map((menuItem, i) => (
                 <span key={menuItem?.path}>
                     <Link
                         href={menuItem?.path}
-                        className='link'
+                        className={styles.link}
                     >{`${menuItem?.title}`}</Link>
-                    <span className='not-link'>{`${
+                    <span className={styles.notLink}>{`${
                         i == typesMenu.length - 1 ? '.' : ','
                     } `}</span>
                 </span>

components/home/styles.module.scss

@@ -15,24 +15,45 @@
 .typesNav {
     text-align: center;
 
-    :global .filter {
+    .filter {
         @include typography.body;
     }
 
-    :global .not-link {
+    .notLink {
         @include typography.body-cta;
 
         text-decoration-line: none;
     }
 
-    :global .link {
+    .link {
         @include typography.body-cta;
     }
 }
 
 .homeProductsList {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(24, 1fr);
     column-gap: 10px;
     row-gap: 20px;
+
+    > {
+        li {
+            grid-column-end: span 8;
+
+            &.featured {
+                grid-column-end: span 14;
+            }
+
+            &:has(+ .featured:nth-child(2n + 1)) {
+                grid-column-end: span 10;
+            }
+        }
+
+        li.featured:nth-child(2n) + li {
+            grid-column-end: span 10;
+        }
+    }
+}
+
+.homeProduct {
 }