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

Variable

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

7
components/carousel.tsx
View File

@ -8,12 +8,13 @@ export async function Carousel() {
if (!products?.length) return null; if (!products?.length) return null;
// Purposefully duplicating products to make the carousel loop and not run out of products on wide screens.
const carouselProducts = [...products, ...products, ...products];
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">
// Purposefully duplicating products to make the carousel loop and not run // out of {carouselProducts.map((product, i) => (
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"