diff --git a/components/home/index.js b/components/home/index.js index 5384cbab2..c32d0fe94 100644 --- a/components/home/index.js +++ b/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> diff --git a/components/home/styles.module.scss b/components/home/styles.module.scss index 85bcec02f..4069c28b7 100644 --- a/components/home/styles.module.scss +++ b/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 { }