'use client'; import { useState } from 'react'; import { motion, AnimatePresence } from 'motion/react'; import { X, Check, ArrowUpRight } from 'lucide-react'; type Variant = | 'default' | 'secondary' | 'destructive' | 'dot' | 'link' | 'status' | 'selectable' | 'closeable' | 'shine'; type BadgeItem = { id: string; label: string; variant: Variant; href?: string; status?: 'online' | 'offline' | 'busy'; }; const base = 'inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-medium backdrop-blur transition'; const styles: Record = { default: 'bg-neutral-900 text-white dark:bg-white dark:text-neutral-900', secondary: 'bg-neutral-100 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-200', destructive: 'bg-red-500/15 text-red-600 dark:text-red-400 border border-red-500/30', dot: 'bg-neutral-100 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-200', link: 'bg-neutral-100 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-200', status: 'bg-neutral-100 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-200', selectable: 'bg-neutral-100 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-200 cursor-pointer', closeable: 'bg-neutral-100 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-200', shine: 'bg-gradient-to-r from-neutral-200 via-white to-neutral-200 dark:from-neutral-800 dark:via-neutral-700 dark:to-neutral-800 text-neutral-800 dark:text-neutral-200', }; const statusColors: Record, string> = { online: 'bg-green-500', offline: 'bg-neutral-400', busy: 'bg-yellow-500', }; const initial: BadgeItem[] = [ { id: '1', label: 'Default', variant: 'default' }, { id: '2', label: 'Secondary', variant: 'secondary' }, { id: '3', label: 'Error', variant: 'destructive' }, { id: '4', label: 'Dot Badge', variant: 'dot' }, { id: '5', label: 'Docs', variant: 'link', href: '#' }, { id: '6', label: 'Online', variant: 'status', status: 'online' }, { id: '7', label: 'Selectable', variant: 'selectable' }, { id: '8', label: 'Closable', variant: 'closeable' }, { id: '9', label: 'New Feature', variant: 'shine' }, ]; export default function Badge() { const [items, setItems] = useState(initial); const [selected, setSelected] = useState([]); const remove = (id: string) => { setItems((prev) => prev.filter((i) => i.id !== id)); }; const toggle = (id: string) => { setSelected((prev) => prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id], ); }; return (

{items.map((item) => { const isSelected = selected.includes(item.id); const content = ( item.variant === 'selectable' && toggle(item.id)} > {item.variant === 'dot' && ( )} {item.variant === 'shine' && ( )} {item.variant === 'status' && item.status && ( )} {item.variant === 'selectable' && isSelected && ( )} {item.variant === 'selectable' && isSelected ? 'Selected' : item.label} {item.variant === 'link' && ( )} {item.variant === 'closeable' && ( )} ); if (item.variant === 'link' && item.href) { return ( {content} ); } return

{content}

; })}

); }

Badge

Installation

Usage