Tabs with Icons

1'use client';
2import { useState, type ReactNode } from 'react';
3import Link from 'next/link';
4import { Settings, Users, BarChart3, Home, 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 TabsWithIconsSection() {
29  const [activeIconTab, setActiveIconTab] = useState(0);
30
31  const iconTabs = [
32    { label: 'Dashboard', icon: Home },
33    { label: 'Analytics', icon: BarChart3 },
34    { label: 'Users', icon: Users },
35    { label: 'Settings', icon: Settings },
36  ];
37
38  return (
39    <SectionCard title="Tabs with Icons" sourceSlug="/ui/source/ui-elements/tabs-with-icons">
40      <div className="space-y-4">
41        {/* Horizontal Icon Tabs */}
42        <div className="grid grid-cols-4 gap-1 rounded-xl bg-gray-100 p-1 dark:bg-white/5">
43          {iconTabs.map((tab, i) => (
44            <button key={tab.label} onClick={() => setActiveIconTab(i)} className={`flex min-w-0 items-center justify-center gap-2 rounded-lg px-2 py-2 text-sm font-medium transition-all ${activeIconTab === i ? 'bg-white text-brand-500 shadow-theme-sm dark:bg-gray-700 dark:text-brand-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'}`}>
45              <tab.icon className="size-4" />
46              <span className="hidden truncate sm:inline">{tab.label}</span>
47            </button>
48          ))}
49        </div>
50        <div className="rounded-lg bg-gray-50 p-4 dark:bg-white/5">
51          <p className="text-sm text-gray-600 dark:text-gray-400">Content for <span className="font-semibold text-gray-800 dark:text-white/90">{iconTabs[activeIconTab].label}</span> tab with icon navigation.</p>
52        </div>
53        {/* Icon-only Tabs */}
54        <div>
55          <p className="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">Icon Only</p>
56          <div className="flex gap-2">
57            {iconTabs.map((tab, i) => (
58              <button key={tab.label} onClick={() => setActiveIconTab(i)} className={`flex size-10 items-center justify-center rounded-xl transition-all ${activeIconTab === i ? 'bg-brand-500 text-white shadow-theme-sm' : 'bg-gray-100 text-gray-500 hover:bg-gray-200 dark:bg-white/5 dark:text-gray-400 dark:hover:bg-white/10'}`}>
59                <tab.icon className="size-4" />
60              </button>
61            ))}
62          </div>
63        </div>
64      </div>
65    </SectionCard>
66  );
67}