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

Adds more home page carousel products for wide screens (#1142)

Browse Source
This commit is contained in:
Michael Novotny 2023-08-03 21:17:02 -05:00 committed by GitHub
parent 0e13cfc3dd
commit ef92d578cd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/carousel.tsx
View File

@ -8,10 +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">
{[...products, ...products].map((product, i) => ( {carouselProducts.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"