Chips

1'use client';
2import { useState, type ReactNode } from 'react';
3import Link from 'next/link';
4import { Check, Code2, Zap, Shield, Globe, Tag, Layers } 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 ChipsSection() {
29  const [selected, setSelected] = useState<string[]>(['React']);
30  const chips = [
31    { id: 'react', label: 'React', icon: Code2, color: 'bg-blue-light-50 text-blue-light-600 dark:bg-blue-light-500/15 dark:text-blue-light-500' },
32    { id: 'vue', label: 'Vue', icon: Layers, color: 'bg-success-50 text-success-600 dark:bg-success-500/15 dark:text-success-500' },
33    { id: 'angular', label: 'Angular', icon: Shield, color: 'bg-error-50 text-error-600 dark:bg-error-500/15 dark:text-error-500' },
34    { id: 'svelte', label: 'Svelte', icon: Zap, color: 'bg-brand-50 text-brand-600 dark:bg-brand-500/15 dark:text-brand-400' },
35    { id: 'next', label: 'Next.js', icon: Globe, color: 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300' },
36  ];
37
38  const toggle = (id: string) => setSelected((p) => p.includes(id) ? p.filter((x) => x !== id) : [...p, id]);
39
40  return (
41    <SectionCard title="Chips" sourceSlug="/ui/source/ui-elements/chips">
42      <div className="space-y-4">
43        {/* Action Chips */}
44        <div>
45          <p className="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">Action Chips</p>
46          <div className="flex flex-wrap gap-2">
47            {chips.map((c) => (
48              <button key={c.id} onClick={() => toggle(c.id)} className={`inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-all ${c.color} ${selected.includes(c.id) ? 'ring-2 ring-offset-1 ring-brand-500/30 dark:ring-offset-gray-dark' : 'opacity-70 hover:opacity-100'}`}>
49                <c.icon className="size-3.5" />
50                {c.label}
51                {selected.includes(c.id) && <Check className="size-3" />}
52              </button>
53            ))}
54          </div>
55        </div>
56        {/* Static Chips */}
57        <div>
58          <p className="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">Static Chips</p>
59          <div className="flex flex-wrap gap-2">
60            {['Design', 'Development', 'Marketing', 'Analytics'].map((label) => (
61              <span key={label} className="inline-flex items-center gap-1.5 rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 dark:bg-gray-700 dark:text-gray-300">
62                <Tag className="size-3" /> {label}
63              </span>
64            ))}
65          </div>
66        </div>
67      </div>
68    </SectionCard>
69  );
70}