Carrusel update with swipe

2025-08-27 14:16:53 -06:00
parent 0ca7d8353d
commit f1dd78d109
4 changed files with 317 additions and 25 deletions
--- a/components/shoe-results-popup.tsx
+++ b/components/shoe-results-popup.tsx
@@ -3,6 +3,8 @@
 import Image from 'next/image';
 import { useState, useEffect } from 'react';
 import { Drawer } from 'vaul';
+import { type CarouselApi } from "@/components/ui/carousel";
+import { Carousel, CarouselContent, CarouselItem } from "@/components/ui/carousel";

 import { Button } from '@/components/ui/button';
 import type { Shoe } from '@/lib/shoe-database';
@@ -14,44 +16,65 @@ interface ShoeResultsPopupProps {
 }

 export default function ShoeResultsPopup({ shoe, isOpen, onOpenChange }: ShoeResultsPopupProps) {
+  const [api, setApi] = useState<CarouselApi>();
  const [activeImageUrl, setActiveImageUrl] = useState(shoe?.imageUrl);
+  const [allImages, setAllImages] = useState<string[]>([]);

  useEffect(() => {
-    // Reset the image when the shoe prop changes
    if (shoe) {
+      const images = [shoe.imageUrl, ...shoe.colorOptions.map(o => o.imageUrl)];
+      setAllImages(images);
      setActiveImageUrl(shoe.imageUrl);
+      api?.scrollTo(0, true); // Jump to start without animation
    }
-  }, [shoe]);
+  }, [shoe, api]);

-  if (!shoe) {
-    return null;
-  }
+  useEffect(() => {
+    if (!api) return;
+
+    const handleSelect = () => {
+      const selectedIndex = api.selectedScrollSnap();
+      setActiveImageUrl(allImages[selectedIndex]);
+    };
+
+    api.on("select", handleSelect);
+    return () => {
+      api.off("select", handleSelect);
+    };
+  }, [api, allImages]);
+
+  const handleThumbnailClick = (imageUrl: string) => {
+    const index = allImages.findIndex(url => url === imageUrl);
+    if (index !== -1) {
+      api?.scrollTo(index);
+    }
+  };
+
+  if (!shoe) return null;

  return (
    <Drawer.Root open={isOpen} onOpenChange={onOpenChange}>
      <Drawer.Portal>
        <Drawer.Overlay className="fixed inset-0 bg-black/40" />
-        <Drawer.Content className="fixed bottom-0 left-0 right-0 mt-24 flex h-[90%] flex-col rounded-t-[10px] bg-gray-100 dark:bg-gray-900">
+        <Drawer.Content className="fixed bottom-0 left-0 right-0 mt-24 flex h-[90%] flex-col rounded-t-2xl bg-gray-100 dark:bg-gray-900">
          <div className="flex-1 overflow-y-auto rounded-t-[10px]">
-            {/* Drag Handle */}
            <div className="sticky top-0 z-10 w-full bg-inherit rounded-t-[10px] py-4">
-                <div className="mx-auto h-1.5 w-12 flex-shrink-0 rounded-full bg-gray-300 dark:bg-gray-700" />
+              <div className="mx-auto h-1.5 w-12 flex-shrink-0 rounded-full bg-gray-300 dark:bg-gray-700" />
            </div>

-            {/* Main Content */}
            <div className="p-4">
-              {/* Image Section */}
-              <div className="relative mb-6 h-64 w-full overflow-hidden rounded-lg md:h-80">
-                <Image
-                  src={activeImageUrl || shoe.imageUrl}
-                  alt={shoe.name}
-                  layout="fill"
-                  objectFit="contain"
-                  className="transition-opacity duration-300"
-                />
-              </div>
+              <Carousel setApi={setApi} className="w-full mb-6">
+                <CarouselContent>
+                  {allImages.map((url, index) => (
+                    <CarouselItem key={index}>
+                      <div className="relative h-64 w-full overflow-hidden rounded-lg md:h-80">
+                        <Image src={url} alt={`${shoe.name} image ${index + 1}`} layout="fill" objectFit="contain" />
+                      </div>
+                    </CarouselItem>
+                  ))}
+                </CarouselContent>
+              </Carousel>

-              {/* Info Section */}
              <div className="mb-6">
                <h1 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50 md:text-4xl">
                  {shoe.name}
@@ -64,14 +87,13 @@ export default function ShoeResultsPopup({ shoe, isOpen, onOpenChange }: ShoeRes
                </p>
              </div>

-              {/* Color Picker */}
              <div className="mb-8">
                <h3 className="mb-3 text-lg font-semibold text-gray-800 dark:text-gray-200">Colores</h3>
                <div className="flex flex-wrap gap-3">
                  {shoe.colorOptions.map((option) => (
                    <button
                      key={option.color}
-                      onClick={() => setActiveImageUrl(option.imageUrl)}
+                      onClick={() => handleThumbnailClick(option.imageUrl)}
                      className={`relative h-16 w-16 overflow-hidden rounded-md border-2 transition-all duration-200 ${activeImageUrl === option.imageUrl ? 'border-blue-500 scale-105' : 'border-gray-300 dark:border-gray-600'}`}>
                      <Image src={option.imageUrl} alt={option.color} layout="fill" objectFit="cover" />
                    </button>
@@ -80,8 +102,7 @@ export default function ShoeResultsPopup({ shoe, isOpen, onOpenChange }: ShoeRes
              </div>
            </div>
          </div>
-          {/* Bottom Action Button */}
-          <div className="sticky bottom-0 w-full border-t border-gray-200 bg-gray-100/80 p-4 backdrop-blur-sm dark:border-gray-700 dark:bg-gray-900/80">
+          <div className="sticky bottom-0 w-full border-t border-gray-200/50 bg-gray-100/80 p-4 backdrop-blur-sm dark:border-gray-800 dark:bg-gray-900/80">
            <Button size="lg" className="w-full h-12 text-lg">
              Añadir al Carrito
            </Button>
@@ -90,4 +111,4 @@ export default function ShoeResultsPopup({ shoe, isOpen, onOpenChange }: ShoeRes
      </Drawer.Portal>
    </Drawer.Root>
  );
-}
+}
--- a/components/ui/carousel.tsx
+++ b/components/ui/carousel.tsx
@@ -0,0 +1,241 @@
+"use client"
+
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins
+  )
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault()
+        scrollNext()
+      }
+    },
+    [scrollPrev, scrollNext]
+  )
+
+  React.useEffect(() => {
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) return
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
+
+    return () => {
+      api?.off("select", onSelect)
+    }
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -left-12 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+}
+
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -right-12 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
        "@radix-ui/react-slot": "^1.2.3",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
+        "embla-carousel-react": "^8.6.0",
        "lucide-react": "^0.542.0",
        "next": "15.2.4",
        "react": "^19.0.0",
@@ -3147,6 +3148,34 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/embla-carousel": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
+      "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
+      "license": "MIT"
+    },
+    "node_modules/embla-carousel-react": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.6.0.tgz",
+      "integrity": "sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==",
+      "license": "MIT",
+      "dependencies": {
+        "embla-carousel": "8.6.0",
+        "embla-carousel-reactive-utils": "8.6.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/embla-carousel-reactive-utils": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.6.0.tgz",
+      "integrity": "sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "embla-carousel": "8.6.0"
+      }
+    },
    "node_modules/emoji-regex": {
      "version": "9.2.2",
      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
    "@radix-ui/react-slot": "^1.2.3",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
+    "embla-carousel-react": "^8.6.0",
    "lucide-react": "^0.542.0",
    "next": "15.2.4",
    "react": "^19.0.0",