"use client"; import { useState, useRef } from "react"; import gsap from "gsap"; const DEFAULT_STEPS = ["Harvest", "Slice", "Serve", "Enjoy"]; export interface BreadcrumbTrailProps extends Omit, "onChange"> { steps?: string[]; activeColor?: string; inactiveBgColor?: string; inactiveBorderColor?: string; textColor?: string; onChange?: (index: number) => void; } export function BreadcrumbTrail({ steps = DEFAULT_STEPS, activeColor = "#ff5c71", inactiveBgColor = "#111", inactiveBorderColor = "#222", textColor = "#444", onChange, className = "", style, ...props }: BreadcrumbTrailProps) { const [active, setActive] = useState(0); const progressRef = useRef(null); const go = (i: number) => { setActive(i); if (onChange) onChange(i); if (progressRef.current) { gsap.to(progressRef.current, { width: `${((i) / (steps.length - 1)) * 100}%`, duration: 0.5, ease: "power2.out", }); } }; const handleKeyDown = (e: React.KeyboardEvent, i: number) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); go(i); } }; return (

{/* Step labels */}

{steps.map((step, i) => { const isActive = i <= active; return ( ); })}

{/* Progress track */}

Step {active + 1} of {steps.length}: {steps[active]}

); }

Component Showcase

Choose Installation Method

AI Automation Agent Prompt