1'use client';
2import { useState, type ReactNode } from 'react';
3import Link from 'next/link';
4import { AlertTriangle, Plus, Download, Mail, Heart, Search, Settings, Bell, Trash2, Edit3, Eye, Star, Home, Copy, Check, User, Code2, Upload, Zap, Filter, Shield, Globe, Cpu, Wifi, Camera, MapPin, Calendar, Phone, Lock, Tag, Bookmark, Layers, Database, Cloud, GitBranch, Terminal } 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 IconShowcaseSection() {
29 const [search, setSearch] = useState('');
30 const icons = [
31 { name: 'Home', icon: Home },
32 { name: 'Search', icon: Search },
33 { name: 'Settings', icon: Settings },
34 { name: 'Bell', icon: Bell },
35 { name: 'Mail', icon: Mail },
36 { name: 'User', icon: User },
37 { name: 'Heart', icon: Heart },
38 { name: 'Star', icon: Star },
39 { name: 'Plus', icon: Plus },
40 { name: 'Trash2', icon: Trash2 },
41 { name: 'Edit3', icon: Edit3 },
42 { name: 'Eye', icon: Eye },
43 { name: 'Download', icon: Download },
44 { name: 'Upload', icon: Upload },
45 { name: 'Copy', icon: Copy },
46 { name: 'Check', icon: Check },
47 { name: 'Info', icon: Info },
48 { name: 'Alert', icon: AlertTriangle },
49 { name: 'Shield', icon: Shield },
50 { name: 'Globe', icon: Globe },
51 { name: 'Cpu', icon: Cpu },
52 { name: 'Wifi', icon: Wifi },
53 { name: 'Camera', icon: Camera },
54 { name: 'MapPin', icon: MapPin },
55 { name: 'Calendar', icon: Calendar },
56 { name: 'Phone', icon: Phone },
57 { name: 'Lock', icon: Lock },
58 { name: 'Tag', icon: Tag },
59 { name: 'Bookmark', icon: Bookmark },
60 { name: 'Layers', icon: Layers },
61 { name: 'Database', icon: Database },
62 { name: 'Cloud', icon: Cloud },
63 { name: 'GitBranch', icon: GitBranch },
64 { name: 'Terminal', icon: Terminal },
65 { name: 'Zap', icon: Zap },
66 { name: 'Filter', icon: Filter },
67 ];
68
69 const filtered = icons.filter((i) => i.name.toLowerCase().includes(search.toLowerCase()));
70
71 return (
72 <SectionCard title="Icon Showcase" sourceSlug="/ui/source/ui-elements/icon-showcase">
73 <div>
74 <div className="relative mb-4 max-w-xs">
75 <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-gray-400" />
76 <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Search icons..." className="w-full rounded-lg border border-gray-300 bg-white py-2 pl-9 pr-3 text-sm text-gray-800 placeholder-gray-400 outline-none focus:border-brand-500 dark:border-white/10 dark:bg-gray-800 dark:text-white/90 dark:placeholder-gray-500 transition-colors" />
77 </div>
78 <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 gap-2">
79 {filtered.map((item) => (
80 <div key={item.name} className="group flex flex-col items-center gap-1.5 rounded-lg p-2 hover:bg-gray-50 dark:hover:bg-white/5 transition-colors cursor-pointer">
81 <item.icon className="size-5 text-gray-600 group-hover:text-brand-500 dark:text-gray-400 dark:group-hover:text-brand-400 transition-colors" />
82 <span className="text-[9px] text-gray-400 dark:text-gray-500 truncate w-full text-center">{item.name}</span>
83 </div>
84 ))}
85 </div>
86 </div>
87 </SectionCard>
88 );
89}