feat(carousel): add clickable carousel indicators

2025-12-08 18:59:29 +06:00
parent 7ce4a6e4f8
commit ce071622a6
3 changed files with 218 additions and 7 deletions
--- a/hooks/CurrentSlide.tsx
+++ b/hooks/CurrentSlide.tsx
@ -0,0 +1,77 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { CarouselApi } from "@/components/ui/carousel";
+
+export default function CurrentSlide({
+  api,
+  total = 3,
+}: {
+  api?: CarouselApi;
+  total?: number;
+}) {
+  const [current, setCurrent] = useState(0);
+
+  useEffect(() => {
+    if (!api) return;
+
+    // Set initial slide
+    setCurrent(api.selectedScrollSnap());
+
+    const handler = () => setCurrent(api.selectedScrollSnap());
+    api.on("select", handler);
+
+    return () => api.off("select", handler);
+  }, [api]);
+
+  const handleClick = (index: number) => {
+    if (!api) return;
+    api.scrollTo(index); // embla API command to jump to slide
+  };
+
+  return (
+    <div className="flex items-center justify-center w-full gap-8 py-6">
+      {Array.from({ length: total }).map((_, i) => {
+        const isActive = i === current;
+
+        return (
+          <button
+            key={i}
+            onClick={() => handleClick(i)}
+            className="flex flex-col items-center gap-2 cursor-pointer group"
+          >
+            {/* Outer ring */}
+            <div
+              className={`
+                relative w-10 h-10 rounded-full border transition-all duration-300 
+                ${isActive ? "border-[#C74C65]" : "border-[#C74C65]/40"}
+                group-hover:border-[#C74C65]
+              `}
+            >
+              {/* Inner dot (only active) */}
+              {isActive && (
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <div className="w-3 h-3 rounded-full bg-[#C74C65]" />
+                </div>
+              )}
+            </div>
+
+            {/* Slide number */}
+            <span
+              className={`
+                font-lato text-md tracking-widest transition-colors duration-300
+                ${
+                  isActive
+                    ? "text-[#C74C65]"
+                    : "text-[#C74C65]/40 group-hover:text-[#C74C65]"
+                }
+              `}
+            >
+              {String(i + 1).padStart(2, "0")}
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}