crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-15 05:56:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

home: style products grid

Browse Source
This commit is contained in:
andr-ew 2023-07-21 14:24:43 -05:00
parent 25a4ee6dc0
commit cf48cc26cc
2 changed files with 45 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
components/home/index.js
View File

@ -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>

29
components/home/styles.module.scss
View File

@ -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 {
}