97:I[903690,["/chat-static/_next/static/immutable/chunks/0_kdkc823otwv.js","/chat-static/_next/static/immutable/chunks/17kl369b79nmd.js","/chat-static/_next/static/immutable/chunks/0pa2o-879tgyz.js","/chat-static/_next/static/immutable/chunks/0vmwjdmzo33vb.js","/chat-static/_next/static/immutable/chunks/1di_td8luy3gw.js","/chat-static/_next/static/immutable/chunks/0i48amtc28pqy.js","/chat-static/_next/static/immutable/chunks/25oa2-cd4babd.js","/chat-static/_next/static/immutable/chunks/33addp8wpisll.js","/chat-static/_next/static/immutable/chunks/1ibakxw9lycsv.js","/chat-static/_next/static/immutable/chunks/0kpqqt3b70onu.js","/chat-static/_next/static/immutable/chunks/3r-izlig-97d3.js","/chat-static/_next/static/immutable/chunks/1-yirsd6_l__x.js","/chat-static/_next/static/immutable/chunks/3b6rwng7jzw37.js","/chat-static/_next/static/immutable/chunks/0nc47r7g497qp.js","/chat-static/_next/static/immutable/chunks/08ftfj_ae3jl_.js","/chat-static/_next/static/immutable/chunks/16p-wd29zwtcb.js","/chat-static/_next/static/immutable/chunks/1o9d1-74u-xr7.js","/chat-static/_next/static/immutable/chunks/17xddrdopbp9_.js","/chat-static/_next/static/immutable/chunks/17bw078wkmokk.js","/chat-static/_next/static/immutable/chunks/2lsankmaxuiz4.js","/chat-static/_next/static/immutable/chunks/1ybo6yzdrs8bw.js","/chat-static/_next/static/immutable/chunks/25hm_hdm1gsd0.js","/chat-static/_next/static/immutable/chunks/2iyogqj39terz.js","/chat-static/_next/static/immutable/chunks/2v488urps6yag.js","/chat-static/_next/static/immutable/chunks/0ex210m2m3jd_.js","/chat-static/_next/static/immutable/chunks/0avdeadirr7ac.js","/chat-static/_next/static/immutable/chunks/3yu169rnx-6bz.js","/chat-static/_next/static/immutable/chunks/0dt5xmjm5355d.js","/chat-static/_next/static/immutable/chunks/0w0diht866kq4.js","/chat-static/_next/static/immutable/chunks/36at-fgxccn6g.js","/chat-static/_next/static/immutable/chunks/04gkop25t1q10.js","/chat-static/_next/static/immutable/chunks/2mjr-ow9jt224.js","/chat-static/_next/static/immutable/chunks/0f4z2mjqjzpbe.js","/chat-static/_next/static/immutable/chunks/1g-ogsg-tifvg.js","/chat-static/_next/static/immutable/chunks/16pppxvb6m7dw.js","/chat-static/_next/static/immutable/chunks/2x0m84hlfqnp9.js","/chat-static/_next/static/immutable/chunks/3j5pbs0p975ta.js"],"ExplicitChatIdProvider"] 98:I[838238,["/chat-static/_next/static/immutable/chunks/0_kdkc823otwv.js","/chat-static/_next/static/immutable/chunks/17kl369b79nmd.js","/chat-static/_next/static/immutable/chunks/0pa2o-879tgyz.js","/chat-static/_next/static/immutable/chunks/0vmwjdmzo33vb.js","/chat-static/_next/static/immutable/chunks/1di_td8luy3gw.js","/chat-static/_next/static/immutable/chunks/0i48amtc28pqy.js","/chat-static/_next/static/immutable/chunks/25oa2-cd4babd.js","/chat-static/_next/static/immutable/chunks/33addp8wpisll.js","/chat-static/_next/static/immutable/chunks/1ibakxw9lycsv.js","/chat-static/_next/static/immutable/chunks/0kpqqt3b70onu.js","/chat-static/_next/static/immutable/chunks/3r-izlig-97d3.js","/chat-static/_next/static/immutable/chunks/1-yirsd6_l__x.js","/chat-static/_next/static/immutable/chunks/3b6rwng7jzw37.js","/chat-static/_next/static/immutable/chunks/0nc47r7g497qp.js","/chat-static/_next/static/immutable/chunks/08ftfj_ae3jl_.js","/chat-static/_next/static/immutable/chunks/16p-wd29zwtcb.js","/chat-static/_next/static/immutable/chunks/1o9d1-74u-xr7.js","/chat-static/_next/static/immutable/chunks/17xddrdopbp9_.js","/chat-static/_next/static/immutable/chunks/17bw078wkmokk.js","/chat-static/_next/static/immutable/chunks/2lsankmaxuiz4.js","/chat-static/_next/static/immutable/chunks/1ybo6yzdrs8bw.js","/chat-static/_next/static/immutable/chunks/25hm_hdm1gsd0.js","/chat-static/_next/static/immutable/chunks/2iyogqj39terz.js","/chat-static/_next/static/immutable/chunks/2v488urps6yag.js","/chat-static/_next/static/immutable/chunks/0ex210m2m3jd_.js","/chat-static/_next/static/immutable/chunks/0avdeadirr7ac.js","/chat-static/_next/static/immutable/chunks/3yu169rnx-6bz.js","/chat-static/_next/static/immutable/chunks/0dt5xmjm5355d.js","/chat-static/_next/static/immutable/chunks/0w0diht866kq4.js","/chat-static/_next/static/immutable/chunks/36at-fgxccn6g.js","/chat-static/_next/static/immutable/chunks/04gkop25t1q10.js","/chat-static/_next/static/immutable/chunks/2mjr-ow9jt224.js","/chat-static/_next/static/immutable/chunks/0f4z2mjqjzpbe.js","/chat-static/_next/static/immutable/chunks/1g-ogsg-tifvg.js","/chat-static/_next/static/immutable/chunks/16pppxvb6m7dw.js","/chat-static/_next/static/immutable/chunks/2x0m84hlfqnp9.js","/chat-static/_next/static/immutable/chunks/3j5pbs0p975ta.js"],"SWRDataProvider"] 99:Tfcd,[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}

))}

) } 8d:["$","$L97",null,{"chatId":"ESbbGkWhfDO","children":["$","$L98",null,{"data":{"@\"active-block\",\"ESbbGkWhfDO\",":{"id":"HcSKGOyyDmP","messageId":"5Lpf2p9qpyPLIXuCmXYGiSpbFVXG0CuN","source":"$99","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"precise-ui-features","type":"code-project","project":"precise-ui-features"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"ESbbGkWhfDO\",":false},"children":"$L9a"}]}]

About

Tags

Share

About

Tags

Share

More from yadwinder

More Templates Like This