Dropdowns

1'use client';
2import { useState, useEffect, type ReactNode } from 'react';
3import Link from 'next/link';
4import { Download, Settings, Trash2, Edit3, Eye, ChevronRight, User, 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 DropdownsSection() {
29  const [open, setOpen] = useState<string | null>(null);
30  const toggle = (id: string) => setOpen((p) => (p === id ? null : id));
31
32  useEffect(() => {
33    const handler = () => setOpen(null);
34    if (open) document.addEventListener('click', handler);
35    return () => document.removeEventListener('click', handler);
36  }, [open]);
37
38  return (
39    <SectionCard title="Dropdowns" sourceSlug="/ui/source/ui-elements/dropdowns">
40      <div className="flex flex-wrap gap-4">
41        {/* Basic */}
42        <div className="relative">
43          <button onClick={(e) => { e.stopPropagation(); toggle('basic'); }} className="inline-flex items-center gap-2 rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:border-white/10 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors">
44            Basic Dropdown <ChevronRight className={`size-4 transition-transform ${open === 'basic' ? 'rotate-90' : ''}`} />
45          </button>
46          {open === 'basic' && (
47            <div className="absolute left-0 top-full z-50 mt-2 w-48 rounded-xl border border-gray-200 bg-white py-1 shadow-theme-lg dark:border-white/5 dark:bg-gray-800">
48              {['Profile', 'Settings', 'Billing', 'Notifications'].map((item) => (
49                <button key={item} className="flex w-full items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-white/5 transition-colors">{item}</button>
50              ))}
51            </div>
52          )}
53        </div>
54
55        {/* With Icons */}
56        <div className="relative">
57          <button onClick={(e) => { e.stopPropagation(); toggle('icons'); }} className="inline-flex items-center gap-2 rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:border-white/10 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors">
58            With Icons <ChevronRight className={`size-4 transition-transform ${open === 'icons' ? 'rotate-90' : ''}`} />
59          </button>
60          {open === 'icons' && (
61            <div className="absolute left-0 top-full z-50 mt-2 w-48 rounded-xl border border-gray-200 bg-white py-1 shadow-theme-lg dark:border-white/5 dark:bg-gray-800">
62              {[
63                { icon: Eye, label: 'View' },
64                { icon: Edit3, label: 'Edit' },
65                { icon: Download, label: 'Download' },
66                { icon: Trash2, label: 'Delete' },
67              ].map(({ icon: Icon, label }) => (
68                <button key={label} className="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-white/5 transition-colors">
69                  <Icon className="size-4" /> {label}
70                </button>
71              ))}
72            </div>
73          )}
74        </div>
75
76        {/* With Dividers */}
77        <div className="relative">
78          <button onClick={(e) => { e.stopPropagation(); toggle('dividers'); }} className="inline-flex items-center gap-2 rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:border-white/10 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors">
79            With Dividers <ChevronRight className={`size-4 transition-transform ${open === 'dividers' ? 'rotate-90' : ''}`} />
80          </button>
81          {open === 'dividers' && (
82            <div className="absolute left-0 top-full z-50 mt-2 w-48 rounded-xl border border-gray-200 bg-white py-1 shadow-theme-lg dark:border-white/5 dark:bg-gray-800">
83              <button className="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-white/5"><User className="size-4" /> Profile</button>
84              <button className="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-white/5"><Settings className="size-4" /> Settings</button>
85              <div className="my-1 border-t border-gray-100 dark:border-white/5" />
86              <button className="flex w-full items-center gap-2 px-4 py-2 text-sm text-error-500 hover:bg-error-50 dark:hover:bg-error-500/10"><Trash2 className="size-4" /> Delete Account</button>
87            </div>
88          )}
89        </div>
90      </div>
91    </SectionCard>
92  );
93}