Spotlight Indicator

1"use client";2
3import { useEffect, useRef, useState } from "react";4import { Clock, Heart, Layers } from "lucide-react";5
6const items = [7  { label: "All components", Icon: Layers },8  { label: "Recently viewed", Icon: Clock },9  { label: "Favorites", Icon: Heart },10];11
12export function SpotlightIndicator() {13  const navRef = useRef<HTMLDivElement>(null);14  const barRef = useRef<HTMLSpanElement>(null);15  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);16  const animatedRef = useRef(false);17  const [active, setActive] = useState(0);18
19  useEffect(() => {20    const nav = navRef.current;21    const bar = barRef.current;22    const button = buttonRefs.current[active];23    if (!nav || !bar || !button) return;24    const navRect = nav.getBoundingClientRect();25    const buttonRect = button.getBoundingClientRect();26    bar.style.top = `${buttonRect.top - navRect.top + 4}px`;27    bar.style.height = `${buttonRect.height - 8}px`;28    const frame = requestAnimationFrame(() => { animatedRef.current = true; });29    return () => cancelAnimationFrame(frame);30  }, [active]);31
32  return (33    <div ref={navRef} className="relative flex w-[210px] flex-col gap-0.5 rounded-lg border border-[#2f333a] bg-[#101216] p-1.5">34      <span ref={barRef} className="pointer-events-none absolute left-1 w-0.5 rounded-sm bg-[#f97316] shadow-[2px_0_5px_rgba(249,115,22,.8),4px_0_11px_rgba(249,115,22,.45)] transition-[top,height] duration-300 ease-[cubic-bezier(.4,0,.2,1)]" />35      {items.map(({ label, Icon }, index) => (36        <button37          key={label}38          ref={(element) => { buttonRefs.current[index] = element; }}39          className={`flex items-center gap-2.5 rounded-md bg-transparent px-3 py-2 text-left text-xs transition-colors duration-300 hover:bg-[#17191d] hover:text-[#e4e6e9] ${active === index ? "text-[#f6f7f8]" : "text-[#a9afb8]"}`}40          onClick={() => setActive(index)}41        >42          <Icon className={active === index ? "text-[#f97316]" : "opacity-40"} size={15} />43          {label}44        </button>45      ))}46    </div>47  );48}