Tabs

import { Tabs, Tab } from '@akitectio/aki-ui'

function BasicTabs() {
  return (
    <Tabs>
      <Tab label="Overview">
        <div className="p-4">
          <h3>Project Overview</h3>
          <p>General information about the project...</p>
        </div>
      </Tab>
      <Tab label="Details">
        <div className="p-4">
          <h3>Project Details</h3>
          <p>Detailed information...</p>
        </div>
      </Tab>
      <Tab label="Settings">
        <div className="p-4">
          <h3>Project Settings</h3>
          <p>Configuration options...</p>
        </div>
      </Tab>
    </Tabs>
  )
}

import { useState } from 'react'
import { Tabs, Tab } from '@akitectio/aki-ui'

function ControlledTabs() {
  const [activeTab, setActiveTab] = useState(0)

  return (
    <div>
      <div className="flex gap-2 mb-4">
        <button onClick={() => setActiveTab(0)}>
          Go to First Tab
        </button>
        <button onClick={() => setActiveTab(2)}>
          Go to Last Tab
        </button>
      </div>
      
      <Tabs activeIndex={activeTab} onChange={setActiveTab}>
        <Tab label="Dashboard">
          <div>Dashboard content...</div>
        </Tab>
        <Tab label="Analytics">
          <div>Analytics content...</div>
        </Tab>
        <Tab label="Reports">
          <div>Reports content...</div>
        </Tab>
      </Tabs>
    </div>
  )
}

<Tabs>
  <Tab label="Home" icon={<span>🏠</span>}>
    <div className="p-4">
      <h3>Home</h3>
      <p>Welcome to the home page...</p>
    </div>
  </Tab>
  <Tab label="Profile" icon={<span>👤</span>}>
    <div className="p-4">
      <h3>User Profile</h3>
      <p>Manage your personal information...</p>
    </div>
  </Tab>
  <Tab label="Messages" icon={<span>💬</span>}>
    <div className="p-4">
      <h3>Messages</h3>
      <p>View and manage your messages...</p>
    </div>
  </Tab>
  <Tab label="Settings" icon={<span>⚙️</span>}>
    <div className="p-4">
      <h3>Settings</h3>
      <p>Configure application settings...</p>
    </div>
  </Tab>
</Tabs>

<Tabs>
  <Tab label="Available">
    <div>This feature is available...</div>
  </Tab>
  <Tab label="Coming Soon" disabled>
    <div>This feature is coming soon...</div>
  </Tab>
  <Tab label="Beta" icon={<span>⚠️</span>}>
    <div>This feature is in beta...</div>
  </Tab>
  <Tab label="Premium" disabled>
    <div>Premium feature...</div>
  </Tab>
</Tabs>

{/* Horizontal Tabs (Default) */}
<Tabs orientation="horizontal">
  <Tab label="Tab 1">Content 1</Tab>
  <Tab label="Tab 2">Content 2</Tab>
  <Tab label="Tab 3">Content 3</Tab>
</Tabs>

{/* Vertical Tabs */}
<Tabs orientation="vertical">
  <Tab label="Dashboard">Dashboard content</Tab>
  <Tab label="Analytics">Analytics content</Tab>
  <Tab label="Settings">Settings content</Tab>
</Tabs>