crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 20:26:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added image component to product images

Browse Source
This commit is contained in:
Luis Alvarez
2020-10-21 21:28:28 -05:00
parent 5d0da87c3c
commit dc80358bc6
6 changed files with 404 additions and 722 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
pages/index.tsx
View File

@@ -65,13 +65,26 @@ export default function Home({
return (
<div className="mt-3">
<Grid>
{featured.slice(0, 3).map(({ node }) => (
<ProductCard key={node.path} product={node} />
{featured.slice(0, 3).map(({ node }, i) => (
<ProductCard
key={node.path}
product={node}
// The first image is the largest one in the grid
imgWidth={i === 0 ? 1600 : 1024}
imgHeight={i === 0 ? 1600 : 1024}
priority
/>
))}
</Grid>
<Marquee variant="secondary">
{bestSelling.slice(0, 3).map(({ node }) => (
<ProductCard key={node.path} product={node} variant="slim" />
<ProductCard
key={node.path}
product={node}
variant="slim"
imgWidth={320}
imgHeight={320}
/>
))}
</Marquee>
<Hero
@@ -85,13 +98,25 @@ export default function Home({
‘Natural’."
/>
<Grid layout="B">
{featured.slice(3, 6).map(({ node }) => (
<ProductCard key={node.path} product={node} />
{featured.slice(3, 6).map(({ node }, i) => (
<ProductCard
key={node.path}
product={node}
// The second image is the largest one in the grid
imgWidth={i === 1 ? 1600 : 1024}
imgHeight={i === 1 ? 1600 : 1024}
/>
))}
</Grid>
<Marquee>
{bestSelling.slice(3, 6).map(({ node }) => (
<ProductCard key={node.path} product={node} variant="slim" />
<ProductCard
key={node.path}
product={node}
variant="slim"
imgWidth={320}
imgHeight={320}
/>
))}
</Marquee>
<div className="py-12 flex flex-row w-full px-12">
@@ -122,7 +147,13 @@ export default function Home({
<div className="flex-1">
<Grid layout="normal">
{newestProducts.map(({ node }) => (
<ProductCard key={node.path} product={node} variant="simple" />
<ProductCard
key={node.path}
product={node}
variant="simple"
imgWidth={480}
imgHeight={480}
/>
))}
</Grid>
</div>

2
pages/search.tsx
View File

@@ -147,6 +147,8 @@ export default function Search({
key={node.path}
className="animate__animated animate__fadeIn"
product={node}
imgWidth={480}
imgHeight={480}
/>
))}
</Grid>