updating carousel to new style

Sammii-HK · Apr 24, 2024 · d2f0ac2 · d2f0ac2
1 parent 5457170
commit d2f0ac2
Showing 1 changed file with 45 additions and 24 deletions.
diff --git a/components/ui/carousel.tsx b/components/ui/carousel.tsx
@@ -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() {
+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 products = await getCollectionProducts({ collection: 'hidden-homepage-carousel' });
-  console.log("🐡🐠🐬 products", products);
+  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>
   );