Breadcrumb with Dropdown

1'use client';
2import { useState, useEffect, type ReactNode } from 'react';
3import Link from 'next/link';
4import { Home, ChevronRight, Code2, ChevronDown } 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 BreadcrumbDropdownSection() {
29  const [dropdownOpen, setDropdownOpen] = useState(false);
30
31  useEffect(() => {
32    const handler = () => setDropdownOpen(false);
33    if (dropdownOpen) document.addEventListener('click', handler);
34    return () => document.removeEventListener('click', handler);
35  }, [dropdownOpen]);
36
37  return (
38    <SectionCard title="Breadcrumb with Dropdown" sourceSlug="/ui/source/ui-elements/breadcrumb-dropdown">
39      <div className="space-y-4">
40        {/* Breadcrumb with overflow dropdown */}
41        <nav className="flex items-center gap-1.5 text-sm">
42          <a href="#" onClick={(e) => e.preventDefault()} className="text-gray-500 hover:text-brand-500 dark:text-gray-400 dark:hover:text-brand-400 transition-colors">Home</a>
43          <ChevronRight className="size-3.5 text-gray-400" />
44          <div className="relative">
45            <button onClick={(e) => { e.stopPropagation(); setDropdownOpen(!dropdownOpen); }} className="inline-flex items-center gap-1 text-gray-500 hover:text-brand-500 dark:text-gray-400 dark:hover:text-brand-400 transition-colors">
46              ...<ChevronDown className={`size-3 transition-transform ${dropdownOpen ? 'rotate-180' : ''}`} />
47            </button>
48            {dropdownOpen && (
49              <div className="absolute left-0 top-full z-50 mt-1 w-44 rounded-xl border border-gray-200 bg-white py-1 shadow-theme-lg dark:border-white/5 dark:bg-gray-800">
50                {['Products', 'Categories', 'Inventory'].map((item) => (
51                  <button key={item} className="flex w-full items-center px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-white/5 transition-colors">{item}</button>
52                ))}
53              </div>
54            )}
55          </div>
56          <ChevronRight className="size-3.5 text-gray-400" />
57          <a href="#" onClick={(e) => e.preventDefault()} className="text-gray-500 hover:text-brand-500 dark:text-gray-400 dark:hover:text-brand-400 transition-colors">Electronics</a>
58          <ChevronRight className="size-3.5 text-gray-400" />
59          <span className="font-medium text-gray-800 dark:text-white/90">Laptops</span>
60        </nav>
61        {/* Compact breadcrumb */}
62        <nav className="flex items-center gap-1.5 text-sm rounded-lg bg-gray-50 px-3 py-2 dark:bg-white/5">
63          <Home className="size-3.5 text-gray-400" />
64          <ChevronRight className="size-3 text-gray-300 dark:text-gray-600" />
65          <a href="#" onClick={(e) => e.preventDefault()} className="text-gray-500 hover:text-brand-500 dark:text-gray-400 dark:hover:text-brand-400 transition-colors">Dashboard</a>
66          <ChevronRight className="size-3 text-gray-300 dark:text-gray-600" />
67          <span className="font-medium text-gray-800 dark:text-white/90">UI Elements</span>
68        </nav>
69      </div>
70    </SectionCard>
71  );
72}