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

69
components/ui/carousel.tsx
View File

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