'use client' import { useState } from 'react' import { ChevronRight, Menu, X, Layout, User, Settings, HelpCircle } from 'lucide-react' type Tab = { id: string label: string icon: React.ReactNode content: string description: string } const tabData: Tab[] = [ { id: 'tab1', label: 'Dashboard', icon: , description: 'Overview and Analytics', content: 'This is your main dashboard view. Here you can see an overview of your analytics, recent activity, and key metrics.' }, { id: 'tab2', label: 'Profile', icon: , description: 'Personal Information', content: 'Manage your profile settings, update your personal information, and customize your preferences.' }, { id: 'tab3', label: 'Settings', icon: , description: 'Account Configuration', content: 'Configure your account settings, notification preferences, and security options.' }, { id: 'tab4', label: 'Help', icon: , description: 'Support and Resources', content: 'Need assistance? Find helpful resources, FAQs, and contact information for support.' } ] export function ClassicTabs() { const [activeTab, setActiveTab] = useState(tabData[0].id) const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) return (

{tabData.find(tab => tab.id === activeTab)?.label}

{tabData.map((tab) => ( ))}

{tabData.map((tab) => (

{tab.description}

{tab.content}

))}

) } export function PillTabs() { const [activeTab, setActiveTab] = useState(tabData[0].id) const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) return (

{tabData.map((tab) => ( ))}

{tabData.map((tab) => (

{tab.description}

{tab.content}

))}

) } export function VerticalTabs() { const [activeTab, setActiveTab] = useState(tabData[0].id) const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) return (

{tabData.map((tab) => ( ))}

{tabData.map((tab) => (

{tab.description}

{tab.content}

))}

) } export default function TabSystemsShowcase() { return (

Tab System Variations

Three different styles of tab navigation components

) }

Tab Showcase