Color Swatches

1'use client';
2import { useState, type ReactNode } from 'react';
3import Link from 'next/link';
4import { Check, 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 ColorSwatchesSection() {
29  const [copied, setCopied] = useState<string | null>(null);
30  const colors = [
31    { name: 'Brand', shades: ['bg-brand-50', 'bg-brand-100', 'bg-brand-200', 'bg-brand-300', 'bg-brand-400', 'bg-brand-500', 'bg-brand-600', 'bg-brand-700'] },
32    { name: 'Success', shades: ['bg-success-50', 'bg-success-100', 'bg-success-200', 'bg-success-300', 'bg-success-400', 'bg-success-500', 'bg-success-600', 'bg-success-700'] },
33    { name: 'Warning', shades: ['bg-warning-50', 'bg-warning-100', 'bg-warning-200', 'bg-warning-300', 'bg-warning-400', 'bg-warning-500', 'bg-warning-600', 'bg-warning-700'] },
34    { name: 'Error', shades: ['bg-error-50', 'bg-error-100', 'bg-error-200', 'bg-error-300', 'bg-error-400', 'bg-error-500', 'bg-error-600', 'bg-error-700'] },
35  ];
36
37  const handleCopy = (color: string) => { navigator.clipboard.writeText(color); setCopied(color); setTimeout(() => setCopied(null), 1500); };
38
39  return (
40    <SectionCard title="Color Swatches" sourceSlug="/ui/source/ui-elements/color-swatches">
41      <div className="space-y-4">
42        {colors.map((group) => (
43          <div key={group.name}>
44            <p className="mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">{group.name}</p>
45            <div className="flex gap-1">
46              {group.shades.map((shade) => (
47                <button key={shade} onClick={() => handleCopy(shade)} className={`group relative flex-1 h-10 first:rounded-l-lg last:rounded-r-lg ${shade} transition-transform hover:scale-110`}>
48                  {copied === shade && <span className="absolute inset-0 flex items-center justify-center text-[9px] font-bold text-white drop-shadow"><Check className="size-3" /></span>}
49                </button>
50              ))}
51            </div>
52          </div>
53        ))}
54      </div>
55    </SectionCard>
56  );
57}