78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
"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>
|
|
);
|
|
}
|