"use client" import { useEffect, useState } from "react" import { animate, useMotionValue } from "motion/react" import * as motion from "motion/react-client" import { useTheme } from "next-themes" import { cn } from "@/lib/utils" // Theme-aware color configurations const themes = { dark: { bg: "#111113", containerBg: "#141416", underLayerBg: "#101012", borderFrom: "#0a0a0b", borderVia: "#1a1a1c", borderTo: "#252527", wellBg: "#0a0a0b", innerRingBg: "#0c0c0d", buttonBg: "#111113", textActive: "text-white", textInactive: "text-[#6b6b6d] hover:text-zinc-400", iconColor: "text-white hover:text-zinc-300", }, light: { bg: "#f5f5f7", containerBg: "#ffffff", underLayerBg: "#e8e8ea", borderFrom: "#d0d0d5", borderVia: "#e5e5e8", borderTo: "#f0f0f2", wellBg: "#e0e0e3", innerRingBg: "#d8d8db", buttonBg: "#f0f0f2", textActive: "text-zinc-900", textInactive: "text-zinc-400 hover:text-zinc-600", iconColor: "text-zinc-700 hover:text-zinc-900", }, } interface NavItem { id: string icon: React.ReactNode label: string } const navItems: NavItem[] = [ { id: "dashboard", label: "Dashboard", icon: ( ), }, { id: "analytics", label: "Analytics", icon: ( ), }, { id: "layers", label: "Layers", icon: ( ), }, { id: "storage", label: "Storage", icon: ( ), }, ] function InnerButtonOverlay({ isOverlayActive, isDarkMode, }: { isOverlayActive: boolean isDarkMode: boolean }) { const overlayProgress = useMotionValue(isOverlayActive ? 1 : 0) useEffect(() => { const controls = animate(overlayProgress, isOverlayActive ? 1 : 0, { delay: isOverlayActive ? 0.02 : 0, duration: isOverlayActive ? 0.18 : 0.14, ease: "easeOut", }) return () => controls.stop() }, [isOverlayActive, overlayProgress]) return ( ) } export function GradientButtonGroup() { const [activeId, setActiveId] = useState("dashboard") const [overlayReadyId, setOverlayReadyId] = useState( "dashboard" ) const { resolvedTheme, setTheme } = useTheme() const isDarkMode = resolvedTheme !== "light" const theme = isDarkMode ? themes.dark : themes.light return (

{/* Background tray layer (recessed) - spans full width including theme toggle */}

{/* Foreground nav layer (raised) - sits on the left */}

{/* Outer rim/bezel */}

{/* Inner container */}

{navItems.map((item) => { const isActive = activeId === item.id const isOverlayActive = isActive && overlayReadyId === item.id const wellStyle = isDarkMode ? { background: "linear-gradient(180deg, #0a0a0c 0%, #0e0e10 50%, #0c0c0e 100%)", boxShadow: "inset 0 2px 6px rgba(0,0,0,0.9), inset 0 0 4px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.05)", } : { boxShadow: "inset 0 2px 6px rgba(0,0,0,0.12), inset 0 0 4px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.9)", } const innerGapStyle = isDarkMode ? { background: "#0a0a0d", boxShadow: "inset 0 1px 3px rgba(0,0,0,0.9), inset 0 0 2px rgba(0,0,0,0.6)", } : { boxShadow: "inset 0 1px 3px rgba(0,0,0,0.18), inset 0 0 2px rgba(0,0,0,0.1)", } return ( ) })}

{/* Theme toggle - sits in the recessed tray on the right */}

) }

Gradient Button Group

Instalação

Dependências