'use client'; import * as React from 'react'; import { AnimatePresence, motion } from 'motion/react'; import { cn } from '@/lib/utils'; import { Layers, SlidersHorizontal, FileDown, Share2, Bell, CircleUserRound, Palette, MousePointer2, Move, Shapes, Frame, type LucideIcon, Edit2, Lock, } from 'lucide-react'; interface ToolbarItem { id: string; title: string; icon: LucideIcon; type?: never; } interface ToolbarProps { className?: string; activeColor?: string; // Tailwind text/color class or custom onSearch?: (value: string) => void; } const buttonVariants = { initial: { gap: 0, paddingLeft: '.5rem', paddingRight: '.5rem', }, animate: (isSelected: boolean) => ({ gap: isSelected ? 6 : 0, paddingLeft: isSelected ? '0.9rem' : '.5rem', paddingRight: isSelected ? '0.9rem' : '.5rem', }), }; const spanVariants = { initial: { width: 0, opacity: 0 }, animate: { width: 'auto', opacity: 1 }, exit: { width: 0, opacity: 0 }, }; const notificationVariants = { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: -6 }, exit: { opacity: 0, y: -18 }, }; const lineVariants = { initial: { scaleX: 0, x: '-50%' }, animate: { scaleX: 1, x: '0%', transition: { duration: 0.2, ease: 'easeOut' }, }, exit: { scaleX: 0, x: '50%', transition: { duration: 0.2, ease: 'easeIn' }, }, }; const transition = { type: 'spring', bounce: 0, duration: 0.35 }; export function Toolbar({ className, activeColor = 'text-[#1F9CFE]', onSearch, }: ToolbarProps) { const [selected, setSelected] = React.useState('select'); const [isToggled, setIsToggled] = React.useState(false); const [activeNotification, setActiveNotification] = React.useState< string | null >(null); const [searchValue, setSearchValue] = React.useState(''); const toolbarItems: ToolbarItem[] = [ { id: 'select', title: 'Select', icon: MousePointer2 }, { id: 'move', title: 'Move', icon: Move }, { id: 'shapes', title: 'Shapes', icon: Shapes }, { id: 'layers', title: 'Layers', icon: Layers }, { id: 'frame', title: 'Frame', icon: Frame }, { id: 'properties', title: 'Properties', icon: SlidersHorizontal }, { id: 'export', title: 'Export', icon: FileDown }, { id: 'share', title: 'Share', icon: Share2 }, { id: 'notifications', title: 'Notifications', icon: Bell }, { id: 'profile', title: 'Profile', icon: CircleUserRound }, { id: 'appearance', title: 'Appearance', icon: Palette }, ]; const handleItemClick = (itemId: string) => { setSelected(selected === itemId ? null : itemId); setActiveNotification(itemId); const timeout = setTimeout(() => setActiveNotification(null), 1400); return () => clearTimeout(timeout); }; const handleSearchChange = (value: string) => { setSearchValue(value); onSearch?.(value); }; const selectedItemTitle = activeNotification && toolbarItems.find((item) => item.id === activeNotification)?.title; const activeColorClasses = cn(activeColor); // tailwind class passthrough return (

{/* LEFT: Tool buttons */}

{toolbarItems.map((item) => { const isSelected = selected === item.id; const Icon = item.icon; return ( handleItemClick(item.id)} className={cn( 'relative inline-flex items-center rounded-lg text-xs font-medium', 'h-8 whitespace-nowrap select-none', 'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:outline-none', isSelected ? ['bg-foreground text-background shadow-sm', 'px-4'] : [ 'text-muted-foreground bg-transparent', 'hover:bg-muted hover:text-foreground', 'px-2.5', ], )} aria-pressed={isSelected} > {isSelected && ( {item.title} )} ); })}

{/* RIGHT: Mode toggle + search */}

{/* Toggle */} setIsToggled((prev) => !prev)} type="button" className={cn( 'inline-flex items-center gap-1.5 rounded-xl border px-3 py-1.5 text-xs font-medium', 'shadow-xs transition-all duration-200', isToggled ? ['bg-foreground text-background', 'border-foreground/80'] : [ 'bg-background text-muted-foreground', 'border-border/60', 'hover:bg-muted hover:text-foreground', ], )} > {isToggled ? ( ) : ( )} {isToggled ? 'Editing' : 'Locked'} {/* Search (optional usage via onSearch) */}

handleSearchChange(e.target.value)} placeholder="Search tools" className="placeholder:text-muted-foreground/70 h-full w-[120px] bg-transparent text-[11px] outline-none" />

); } export default Toolbar;

Toolbar

Installation

Usage