Expanding Icon Tabs

1"use client";2
3import { useEffect, useRef, useState } from "react";4import type { KeyboardEvent as ReactKeyboardEvent } from "react";5import { Activity, Compass, CreditCard, SlidersHorizontal, Users } from "lucide-react";6import type { LucideIcon } from "lucide-react";7
8type TabItem = { id: string; label: string; icon: LucideIcon } | { separator: true };9
10const items: TabItem[] = [11  { id: "overview", label: "Overview", icon: Compass },12  { id: "activity", label: "Activity", icon: Activity },13  { separator: true },14  { id: "filters", label: "Filters", icon: SlidersHorizontal },15  { id: "members", label: "Members", icon: Users },16  { id: "billing", label: "Billing", icon: CreditCard },17];18
19export function ExpandingIconTabs() {20  const [active, setActive] = useState<string | null>(null);21  const rootRef = useRef<HTMLDivElement>(null);22
23  useEffect(() => {24    if (!active) return;25    const region = rootRef.current?.parentElement;26    if (!region) return;27    const handlePointerDown = (event: Event) => {28      if (!rootRef.current?.contains(event.target as Node)) setActive(null);29    };30    region.addEventListener("pointerdown", handlePointerDown);31    return () => region.removeEventListener("pointerdown", handlePointerDown);32  }, [active]);33
34  const moveFocus = (delta: number) => {35    const tabs = Array.from(rootRef.current?.querySelectorAll<HTMLButtonElement>("[data-tab]") ?? []);36    if (!tabs.length) return;37    const index = tabs.indexOf(document.activeElement as HTMLButtonElement);38    const next = index < 0 ? 0 : (index + delta + tabs.length) % tabs.length;39    tabs[next].focus({ preventScroll: true });40  };41
42  const handleKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {43    if (event.key === "ArrowRight" || event.key === "ArrowLeft") {44      event.preventDefault();45      moveFocus(event.key === "ArrowRight" ? 1 : -1);46      return;47    }48    if (event.key === "Escape" && active) {49      event.preventDefault();50      setActive(null);51    }52  };53
54  return (55    <div56      className="flex max-w-full flex-wrap items-center gap-1 rounded-xl border border-[#2b2f36] bg-[#121418] p-1 text-[11px] text-[#dfe2e5] shadow-[inset_0_1px_0_rgba(255,255,255,.04),0_10px_24px_rgba(0,0,0,.35)]"57      role="toolbar"58      aria-label="Workspace views"59      ref={rootRef}60      onKeyDown={handleKeyDown}61    >62      {items.map((item, index) =>63        "separator" in item ? (64          <span65            key={`separator-${index}`}66            className="mx-[2px] h-[18px] w-px flex-none bg-[#23262c]"67            role="separator"68            aria-orientation="vertical"69          />70        ) : (71          <button72            key={item.id}73            type="button"74            className={`inline-flex h-[30px] items-center rounded-[9px] border-0 text-[11px] [transition:gap_.5s_cubic-bezier(.32,.72,0,1),padding_.5s_cubic-bezier(.32,.72,0,1),background-color_.3s_ease,color_.3s_ease] motion-reduce:[transition-duration:.01ms] focus-visible:outline focus-visible:outline-[1.5px] focus-visible:outline-offset-[-1.5px] focus-visible:outline-[#f97316] ${75              active === item.id76                ? "gap-1.5 bg-[#22262c] px-[11px] text-[#f4f5f7]"77                : "gap-0 bg-transparent px-2 text-[#868d97] hover:bg-[#1b1e23] hover:text-[#dfe2e5]"78            }`}79            data-tab=""80            aria-label={item.label}81            aria-pressed={active === item.id}82            onClick={() => setActive(active === item.id ? null : item.id)}83          >84            <span85              className={`grid flex-none place-items-center [transition:color_.3s_ease] motion-reduce:[transition-duration:.01ms] ${86                active === item.id ? "text-[#f97316]" : ""87              }`}88            >89              <item.icon size={15} strokeWidth={1.8} aria-hidden="true" />90            </span>91            <span92              className={`grid overflow-hidden [transition:grid-template-columns_.5s_cubic-bezier(.32,.72,0,1),opacity_.3s_ease] motion-reduce:[transition-duration:.01ms] ${93                active === item.id ? "grid-cols-[1fr] opacity-100" : "grid-cols-[0fr] opacity-0"94              }`}95              aria-hidden="true"96            >97              <span className="min-w-0 overflow-hidden whitespace-nowrap">{item.label}</span>98            </span>99          </button>100        ),101      )}102    </div>103  );104}