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 layout

Browse Source
This commit is contained in:
andr-ew 2023-07-12 22:47:11 -05:00
parent 83ac1a8356
commit 25a4ee6dc0
2 changed files with 8 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/home/index.js
View File

@ -37,20 +37,12 @@ export async function HomeProductsList({ collection }) {
collection,
});
// console.log({ collection, products });
// const num = 4;
// console.log({
// price: products[num].priceRange,
// compareAt: products[num].compareAtPriceRange,
// title: products[num].title,
// });
return (
<>
{products.length === 0 ? (
<p>{`No products found`}</p>
) : (
<ul>
<ul className={styles.homeProductsList}>
{products?.map(product => (
<li key={product?.handle}>
<HomeProduct {...{ product }} />

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

@ -29,3 +29,10 @@
@include typography.body-cta;
}
}
.homeProductsList {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 10px;
row-gap: 20px;
}