Tabs

1'use client';
2import { useState, type ReactNode } from 'react';
3import Link from 'next/link';
4import { Settings, 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 TabsSection() {
29  const [activeTab, setActiveTab] = useState(0);
30  const [activePill, setActivePill] = useState(0);
31
32  const tabs = ['Overview', 'Analytics', 'Reports', 'Settings'];
33  const pillTabs = ['All', 'Active', 'Inactive', 'Pending'];
34
35  return (
36    <SectionCard title="Tabs" sourceSlug="/ui/source/ui-elements/tabs">
37      <div className="space-y-6">
38        {/* Underline Tabs */}
39        <div>
40          <p className="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">Underline Style</p>
41          <div className="flex border-b border-gray-200 dark:border-white/10">
42            {tabs.map((t, i) => (
43              <button key={t} onClick={() => setActiveTab(i)} className={`px-4 py-2.5 text-sm font-medium transition-colors relative ${activeTab === i ? 'text-brand-500' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'}`}>
44                {t}
45                {activeTab === i && <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-brand-500 rounded-full" />}
46              </button>
47            ))}
48          </div>
49          <div className="mt-3 rounded-lg bg-gray-50 p-4 dark:bg-white/5">
50            <p className="text-sm text-gray-600 dark:text-gray-400">Content for <span className="font-semibold text-gray-800 dark:text-white/90">{tabs[activeTab]}</span> tab. Switch between tabs to see different content panels.</p>
51          </div>
52        </div>
53
54        {/* Pill Tabs */}
55        <div>
56          <p className="mb-2 text-xs font-medium uppercase tracking-wider text-gray-400">Pill Style</p>
57          <div className="inline-flex gap-1 rounded-xl bg-gray-100 p-1 dark:bg-white/5">
58            {pillTabs.map((t, i) => (
59              <button key={t} onClick={() => setActivePill(i)} className={`rounded-lg px-4 py-2 text-sm font-medium transition-colors ${activePill === i ? 'bg-white text-gray-800 shadow-theme-sm dark:bg-gray-700 dark:text-white/90' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'}`}>
60                {t}
61              </button>
62            ))}
63          </div>
64          <div className="mt-3 rounded-lg bg-gray-50 p-4 dark:bg-white/5">
65            <p className="text-sm text-gray-600 dark:text-gray-400">Showing <span className="font-semibold text-gray-800 dark:text-white/90">{pillTabs[activePill]}</span> items with pill-style navigation.</p>
66          </div>
67        </div>
68      </div>
69    </SectionCard>
70  );
71}