[V0_FILE]typescriptreact:file="index.tsx" "use client" import { Card, CardContent } from "@/components/ui/card" import { useState, useRef, useEffect } from "react" import { Moon, Sun } from "lucide-react" import { Button } from "@/components/ui/button" const tabs = ["Overview", "Integrations", "Activity", "Domains", "Usage", "Monitoring"] export default function Frame() { const [hoveredIndex, setHoveredIndex] = useState(null) const [activeIndex, setActiveIndex] = useState(0) const [hoverStyle, setHoverStyle] = useState({}) const [activeStyle, setActiveStyle] = useState({ left: "0px", width: "0px" }) const [isDarkMode, setIsDarkMode] = useState(false) 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 overviewElement = tabRefs.current[0] if (overviewElement) { const { offsetLeft, offsetWidth } = overviewElement setActiveStyle({ left: `${offsetLeft}px`, width: `${offsetWidth}px`, }) } }) }, []) const toggleDarkMode = () => { setIsDarkMode(!isDarkMode) document.documentElement.classList.toggle("dark") } return (

{/* Hover Highlight */}

{/* Active Indicator */}

{/* Tabs */}

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

(tabRefs.current[index] = el)} className={`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)} >

{tab}

))}

) }

About

About