'use client'; import { ComponentProps } from 'react'; import * as Icons from 'lucide-react'; // -------------------------------------------------------------------------- // // Types // -------------------------------------------------------------------------- // const iconMap: Record> = { plus: Icons.Plus, check: Icons.Check, x: Icons.X, chevronRight: Icons.ChevronRight, chevronLeft: Icons.ChevronLeft, chevronDown: Icons.ChevronDown, chevronUp: Icons.ChevronUp, arrowRight: Icons.ArrowRight, arrowLeft: Icons.ArrowLeft, edit: Icons.Pencil, trash: Icons.Trash2, save: Icons.Save, search: Icons.Search, filter: Icons.Filter, calendar: Icons.Calendar, clock: Icons.Clock, checkCircle: Icons.CheckCircle2, xCircle: Icons.XCircle, // [Add more icons here...] }; type IconName = keyof typeof iconMap; export type Button01Props = ComponentProps<'button'> & { icon?: IconName; }; // -------------------------------------------------------------------------- // // Styling // -------------------------------------------------------------------------- // const baseClasses = 'flex items-center text-white h-auto tracking-tight transition-all duration-300 ease-out rounded-lg cursor-pointer border gap-1.5 active:scale-[0.98]'; const lightMode = [ 'bg-neutral-900', 'hover:bg-neutral-800', 'border-[rgba(255,255,255,0.1)]', 'hover:border-[rgba(255,255,255,0.15)]', 'hover:shadow-[0_0_40px_rgba(0,0,0,0.2)]', ].join(' '); const darkMode = [ 'dark:bg-neutral-900', 'dark:hover:bg-neutral-800', 'dark:border-[rgba(255,255,255,0.1)]', 'dark:hover:border-[rgba(255,255,255,0.15)]', 'dark:hover:shadow-[0_0_40px_rgba(255,255,255,0.3)]', ].join(' '); // -------------------------------------------------------------------------- // // Button 01 // -------------------------------------------------------------------------- // /** * Button01 wraps a standard HTML button with refined typography, * smooth transitions, and subtle hover/active feedback. */ export function Button01({ className, icon, children, ...props }: Button01Props) { const IconComponent = icon ? iconMap[icon] : null; const paddingClasses = icon ? 'pl-1.5 pr-2 py-1' : 'px-2 py-1'; const allClasses = ['group', baseClasses, lightMode, darkMode, paddingClasses, className] .filter(Boolean) .join(' '); return ( ); } // -------------------------------------------------------------------------- // // Gradient Text // -------------------------------------------------------------------------- // interface GradientTextProps { children: string; } function GradientText({ children }: GradientTextProps) { return ( {children} {children} ); }

Purchase Required