Badges

1'use client';
2import { useState, type ReactNode } from 'react';
3import Link from 'next/link';
4import { X, Code2 } from 'lucide-react';
5
6function SectionCard({ title, sourceSlug, children }: { title: string; sourceSlug?: string; children: ReactNode }) {
7  return (
8    <div>
9      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
10        <h3 className="text-theme-xl font-semibold text-gray-800 dark:text-white/90">{title}</h3>
11        {sourceSlug && (
12          <Link
13            href={sourceSlug}
14            className="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium text-brand-500 transition-colors hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10"
15          >
16            <Code2 className="size-3.5" />
17            View Source
18          </Link>
19        )}
20      </div>
21      <div className="rounded-xl border border-gray-200 bg-white p-6 dark:border-white/5 dark:bg-gray-dark">
22        {children}
23      </div>
24    </div>
25  );
26}
27
28export function BadgesSection() {
29  const [removable, setRemovable] = useState(['React', 'TypeScript', 'Tailwind']);
30
31  const badges = [
32    { label: 'Default', cls: 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300' },
33    { label: 'Brand', cls: 'bg-brand-50 text-brand-600 dark:bg-brand-500/15 dark:text-brand-400' },
34    { label: 'Success', cls: 'bg-success-50 text-success-600 dark:bg-success-500/15 dark:text-success-500' },
35    { label: 'Warning', cls: 'bg-warning-50 text-warning-600 dark:bg-warning-500/15 dark:text-warning-500' },
36    { label: 'Error', cls: 'bg-error-50 text-error-600 dark:bg-error-500/15 dark:text-error-500' },
37    { label: 'Info', cls: 'bg-blue-light-50 text-blue-light-600 dark:bg-blue-light-500/15 dark:text-blue-light-500' },
38  ];
39
40  const dotBadges = [
41    { label: 'Active', dot: 'bg-success-500' },
42    { label: 'Pending', dot: 'bg-warning-500' },
43    { label: 'Inactive', dot: 'bg-gray-400' },
44  ];
45
46  return (
47    <SectionCard title="Badges" sourceSlug="/ui/source/ui-elements/badges">
48      <div className="space-y-4">
49        {/* Color badges */}
50        <div className="flex flex-wrap gap-2">
51          {badges.map((b) => (
52            <span key={b.label} className={`inline-flex items-center rounded-full px-3 py-1 text-theme-xs font-medium ${b.cls}`}>
53              {b.label}
54            </span>
55          ))}
56        </div>
57        {/* Dot badges */}
58        <div className="flex flex-wrap gap-2">
59          {dotBadges.map((b) => (
60            <span key={b.label} className="inline-flex items-center gap-1.5 rounded-full bg-gray-100 px-3 py-1 text-theme-xs font-medium text-gray-700 dark:bg-gray-700 dark:text-gray-300">
61              <span className={`size-2 rounded-full ${b.dot}`} />
62              {b.label}
63            </span>
64          ))}
65        </div>
66        {/* Removable badges */}
67        <div className="flex flex-wrap gap-2">
68          {removable.map((tag) => (
69            <span key={tag} className="inline-flex items-center gap-1 rounded-full bg-brand-50 px-3 py-1 text-theme-xs font-medium text-brand-600 dark:bg-brand-500/15 dark:text-brand-400">
70              {tag}
71              <button onClick={() => setRemovable((p) => p.filter((t) => t !== tag))} className="hover:text-brand-800 dark:hover:text-brand-300">
72                <X className="size-3" />
73              </button>
74            </span>
75          ))}
76        </div>
77      </div>
78    </SectionCard>
79  );
80}