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

Adds more home page carousel products for wide screens

Browse Source
This commit is contained in:
Michael Novotny 2023-08-03 18:33:26 -05:00
parent 80bb15a7dc
commit 643cf868d1
No known key found for this signature in database
1 changed files with 3 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/carousel.tsx
View File

@ -11,7 +11,9 @@ export async function Carousel() {
return ( return (
<div className=" w-full overflow-x-auto pb-6 pt-1"> <div className=" w-full overflow-x-auto pb-6 pt-1">
<ul className="flex animate-carousel gap-4"> <ul className="flex animate-carousel gap-4">
{[...products, ...products].map((product, i) => ( // Purposefully duplicating products to make the carousel loop and not run // out of
products on wide screens.
{[...products, ...products, ...products].map((product, i) => (
<li <li
key={`${product.handle}${i}`} key={`${product.handle}${i}`}
className="relative aspect-square h-[30vh] max-h-[275px] w-2/3 max-w-[475px] flex-none md:w-1/3" className="relative aspect-square h-[30vh] max-h-[275px] w-2/3 max-w-[475px] flex-none md:w-1/3"