"use client" import * as React from "react" import { useState, useRef, useEffect } from "react" import { cn } from "@/lib/utils" interface Tab { id: string label: string } interface TabsProps extends React.HTMLAttributes { tabs: Tab[] activeTab?: string onTabChange?: (tabId: string) => void } const Tabs = React.forwardRef( ({ className, tabs, activeTab, onTabChange, ...props }, ref) => { const [hoveredIndex, setHoveredIndex] = useState(null) const [activeIndex, setActiveIndex] = useState(0) const [hoverStyle, setHoverStyle] = useState({}) const [activeStyle, setActiveStyle] = useState({ left: "0px", width: "0px" }) const tabRefs = useRef<(HTMLDivElement | null)[]>([]) useEffect(() => { if (hoveredIndex !== null) { const hoveredElement = tabRefs.current[hoveredIndex] if (hoveredElement) { const { offsetLeft, offsetWidth } = hoveredElement setHoverStyle({ left: `${offsetLeft}px`, width: `${offsetWidth}px`, }) } } }, [hoveredIndex]) useEffect(() => { const activeElement = tabRefs.current[activeIndex] if (activeElement) { const { offsetLeft, offsetWidth } = activeElement setActiveStyle({ left: `${offsetLeft}px`, width: `${offsetWidth}px`, }) } }, [activeIndex]) useEffect(() => { requestAnimationFrame(() => { const firstElement = tabRefs.current[0] if (firstElement) { const { offsetLeft, offsetWidth } = firstElement setActiveStyle({ left: `${offsetLeft}px`, width: `${offsetWidth}px`, }) } }) }, []) return (

{/* Hover Highlight */}

{/* Active Indicator */}

{/* Tabs */}

{tabs.map((tab, index) => (

(tabRefs.current[index] = el)} className={cn( "px-3 py-2 cursor-pointer transition-colors duration-300 h-[30px]", index === activeIndex ? "text-[#0e0e10] dark:text-white" : "text-[#0e0f1199] dark:text-[#ffffff99]" )} onMouseEnter={() => setHoveredIndex(index)} onMouseLeave={() => setHoveredIndex(null)} onClick={() => { setActiveIndex(index) onTabChange?.(tab.id) }} >

{tab.label}

))}

) } ) Tabs.displayName = "Tabs" export { Tabs }