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

updating carousel to new style

Browse Source
This commit is contained in:
Samantha Kellow 2024-04-24 17:52:02 +01:00
parent 545717006d
commit d2f0ac2041
1 changed files with 45 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
components/ui/carousel.tsx
View File

@ -1,37 +1,58 @@
import { getCollectionProducts } from 'lib/shopify';
import { getAllLiveProducts } from 'lib/utils';
import Link from 'next/link';
import { GridTileImage } from '../grid/tile';
export async function Carousel() {
// Collections that start with `hidden-*` are hidden from the search page.
const products = await getCollectionProducts({ collection: 'hidden-homepage-carousel' });
console.log("🐡🐠🐬 products", products);
type Collection = 'flower' | 'foliage' | 'nature' | 'urban' | 'sky';
export async function Carousel({collection}:
{
collection: Collection | undefined
}) {
// Collections that start with `hidden-*` are hidden from the search page.
const scapeTitle = collection ? `${collection[0]?.toUpperCase()}${collection.slice(1)}scapes` : '';
const getProducts = async () => {
return !!collection ? getCollectionProducts({ collection: scapeTitle }) : getAllLiveProducts();
};
const products = await getProducts();
if (!products?.length) return null;
return (
<div className=" w-full overflow-x-auto pb-6 pt-1">
<div className="flex animate-carousel gap-4">
{[...products, ...products].map((product, i) => (
<Link
key={`${product.handle}${i}`}
href={`/products/${product.handle}`}
className="h-[30vh] w-2/3 flex-none md:w-1/3"
>
<GridTileImage
alt={product.title}
label={{
title: product.title,
amount: product.priceRange.maxVariantPrice.amount,
currencyCode: product.priceRange.maxVariantPrice.currencyCode
}}
src={product.featuredImage?.url}
width={600}
height={600}
/>
</Link>
))}
<div>
{scapeTitle &&
<Link href={`/search/${scapeTitle}`}>
<p className='text-lg text-bold'>{scapeTitle}</p>
</Link>
}
{!scapeTitle &&
// <Link href={`/search/${scapeTitle}`}>
<p className='text-lg text-bold'>All Scapes</p>
// </Link>
}
<div className=" w-full overflow-x-auto pb-6 pt-1 border-neutral-300 border-bottom:not-last-of-type">
<div className="flex animate-carousel gap-4">
{[...products, ...products].map((product, i) => (
<Link
key={`${product.handle}${i}`}
href={`/products/${product.handle}`}
className="h-50 w-1/3 sm-w-1/2 flex-none"
>
<GridTileImage
alt={product.title}
label={{
title: product.title,
amount: product.priceRange.maxVariantPrice.amount,
currencyCode: product.priceRange.maxVariantPrice.currencyCode
}}
src={product.featuredImage?.url}
width={600}
height={600}
/>
</Link>
))}
</div>
</div>
</div>
);