Buttons

1'use client';
2import { useState, type ReactNode } from 'react';
3import Link from 'next/link';
4import { Plus, Download, Mail, Heart, Search, Settings, Trash2, Loader2, 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 ButtonsSection() {
29  const [loading, setLoading] = useState(false);
30  const simulate = () => { setLoading(true); setTimeout(() => setLoading(false), 2000); };
31
32  return (
33    <SectionCard title="Buttons" sourceSlug="/ui/source/ui-elements/buttons">
34      <div className="space-y-5">
35        {/* Variants */}
36        <div>
37          <p className="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">Variants</p>
38          <div className="flex flex-wrap gap-2">
39            <button className="rounded-xl bg-brand-500 px-5 py-2.5 text-sm font-medium text-white shadow-theme-sm hover:bg-brand-600 active:bg-brand-700 transition-colors">Primary</button>
40            <button className="rounded-xl bg-white px-5 py-2.5 text-sm font-medium text-gray-700 shadow-theme-sm border border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-white/10 dark:hover:bg-gray-700 transition-colors">Secondary</button>
41            <button className="rounded-xl border border-brand-500 px-5 py-2.5 text-sm font-medium text-brand-500 hover:bg-brand-50 dark:hover:bg-brand-500/10 transition-colors">Outline</button>
42            <button className="rounded-xl bg-error-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-error-600 transition-colors">Danger</button>
43            <button className="rounded-xl bg-success-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-success-600 transition-colors">Success</button>
44          </div>
45        </div>
46        {/* Sizes */}
47        <div>
48          <p className="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">Sizes</p>
49          <div className="flex flex-wrap items-center gap-2">
50            <button className="rounded-lg bg-brand-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-brand-600 transition-colors">Small</button>
51            <button className="rounded-xl bg-brand-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-600 transition-colors">Medium</button>
52            <button className="rounded-xl bg-brand-500 px-7 py-3 text-base font-medium text-white hover:bg-brand-600 transition-colors">Large</button>
53          </div>
54        </div>
55        {/* With Icons */}
56        <div>
57          <p className="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">With Icons</p>
58          <div className="flex flex-wrap gap-2">
59            <button className="inline-flex items-center gap-2 rounded-xl bg-brand-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-600 transition-colors"><Plus className="size-4" /> Add Item</button>
60            <button className="inline-flex items-center gap-2 rounded-xl bg-white px-5 py-2.5 text-sm font-medium text-gray-700 border border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-white/10 dark:hover:bg-gray-700 transition-colors">Download <Download className="size-4" /></button>
61            <button className="inline-flex items-center gap-2 rounded-xl bg-brand-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-600 transition-colors"><Mail className="size-4" /> Send Email</button>
62          </div>
63        </div>
64        {/* Icon Only */}
65        <div>
66          <p className="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">Icon Only</p>
67          <div className="flex flex-wrap gap-2">
68            <button className="flex size-10 items-center justify-center rounded-xl bg-brand-500 text-white hover:bg-brand-600 transition-colors"><Heart className="size-4" /></button>
69            <button className="flex size-10 items-center justify-center rounded-xl bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-white/10 dark:hover:bg-gray-700 transition-colors"><Search className="size-4" /></button>
70            <button className="flex size-10 items-center justify-center rounded-xl bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-white/10 dark:hover:bg-gray-700 transition-colors"><Settings className="size-4" /></button>
71            <button className="flex size-10 items-center justify-center rounded-xl bg-error-500 text-white hover:bg-error-600 transition-colors"><Trash2 className="size-4" /></button>
72          </div>
73        </div>
74        {/* Button Group */}
75        <div>
76          <p className="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">Button Group</p>
77          <div className="inline-flex rounded-xl border border-gray-300 dark:border-white/10 overflow-hidden">
78            <button className="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors border-r border-gray-300 dark:border-white/10">Left</button>
79            <button className="px-4 py-2 text-sm font-medium text-brand-500 bg-brand-50 hover:bg-brand-100 dark:bg-brand-500/15 dark:text-brand-400 transition-colors border-r border-gray-300 dark:border-white/10">Center</button>
80            <button className="px-4 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors">Right</button>
81          </div>
82        </div>
83        {/* Loading & Disabled */}
84        <div>
85          <p className="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">Loading &amp; Disabled</p>
86          <div className="flex flex-wrap gap-2">
87            <button onClick={simulate} disabled={loading} className="inline-flex items-center gap-2 rounded-xl bg-brand-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-600 disabled:opacity-60 disabled:cursor-not-allowed transition-colors">
88              {loading && <Loader2 className="size-4 animate-spin" />}
89              {loading ? 'Saving...' : 'Save Changes'}
90            </button>
91            <button disabled className="rounded-xl bg-brand-500 px-5 py-2.5 text-sm font-medium text-white opacity-50 cursor-not-allowed">Disabled</button>
92            <button disabled className="rounded-xl bg-gray-200 px-5 py-2.5 text-sm font-medium text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:text-gray-500">Disabled</button>
93          </div>
94        </div>
95      </div>
96    </SectionCard>
97  );
98}