vercel-tabs

1"use client";
2 
3import type React from "react";
4import { useEffect, useRef, useState } from "react";
5import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
6 
7interface TabData {
8  label: string;
9  value: string;
10  content: React.ReactNode;
11}
12 
13interface VercelTabsProps {
14  tabs: TabData[];
15  defaultTab?: string;
16  className?: string;
17}
18 
19export function VercelTabs({ tabs, defaultTab, className }: VercelTabsProps) {
20  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
21  const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.value);
22  const [hoverStyle, setHoverStyle] = useState({});
23  const [activeStyle, setActiveStyle] = useState({ left: "0px", width: "0px" });
24  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
25 
26  const activeIndex = tabs.findIndex((tab) => tab.value === activeTab);
27 
28  useEffect(() => {
29    if (hoveredIndex !== null) {
30      const hoveredElement = tabRefs.current[hoveredIndex];
31      if (hoveredElement) {
32        const { offsetLeft, offsetWidth } = hoveredElement;
33        setHoverStyle({
34          left: `${offsetLeft}px`,
35          width: `${offsetWidth}px`,
36        });
37      }
38    }
39  }, [hoveredIndex]);
40 
41  useEffect(() => {
42    const activeElement = tabRefs.current[activeIndex];
43    if (activeElement) {
44      const { offsetLeft, offsetWidth } = activeElement;
45      setActiveStyle({
46        left: `${offsetLeft}px`,
47        width: `${offsetWidth}px`,
48      });
49    }
50  }, [activeIndex]);
51 
52  useEffect(() => {
53    requestAnimationFrame(() => {
54      const activeElement = tabRefs.current[activeIndex];
55      if (activeElement) {
56        const { offsetLeft, offsetWidth } = activeElement;
57        setActiveStyle({
58          left: `${offsetLeft}px`,
59          width: `${offsetWidth}px`,
60        });
61      }
62    });
63  }, [activeIndex]);
64 
65  return (
66    <Tabs
67      defaultValue={activeTab}
68      onValueChange={setActiveTab}
69      className={`flex w-full flex-col items-center ${className}`}
70    >
71      <TabsList className="relative h-auto select-none gap-[6px] bg-transparent p-0">
72        {/* Hover Highlight */}
73        <div
74          className="absolute top-0 left-0 flex h-[30px] items-center rounded-[6px] bg-[#0e0f1114] transition-all duration-300 ease-out dark:bg-[#ffffff1a]"
75          style={{
76            ...hoverStyle,
77            opacity: hoveredIndex !== null ? 1 : 0,
78          }}
79        />
80 
81        {/* Active Indicator */}
82        <div
83// … truncated