Tabs

import { Tabs } from "@hummingbirdui/react";

export default function TabsDefault() {
  return (
    <Tabs defaultValue="account" className="mx-auto max-w-xl">
      <Tabs.List>
        <Tabs.Trigger value="account">Account</Tabs.Trigger>
        <Tabs.Trigger value="password">Password</Tabs.Trigger>
        <Tabs.Trigger value="team">Team</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="account" className="py-4">
        Manage your account details and profile information.
      </Tabs.Content>
      <Tabs.Content value="password" className="py-4">
        Change your password and review active sessions.
      </Tabs.Content>
      <Tabs.Content value="team" className="py-4">
        Invite teammates and manage their roles.
      </Tabs.Content>
    </Tabs>
  );
}

import { Tabs } from "@hummingbirdui/react";

export default function TabsUnderline() {
  return (
    <Tabs defaultValue="overview" className="mx-auto max-w-xl">
      <Tabs.List variant="underline">
        <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
        <Tabs.Trigger value="activity">Activity</Tabs.Trigger>
        <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="overview" className="py-4">
        A high-level summary of the project.
      </Tabs.Content>
      <Tabs.Content value="activity" className="py-4">
        Recent activity and events.
      </Tabs.Content>
      <Tabs.Content value="settings" className="py-4">
        Project configuration and preferences.
      </Tabs.Content>
    </Tabs>
  );
}

import { Tabs } from "@hummingbirdui/react";

export default function TabsPlain() {
  return (
    <Tabs defaultValue="home" className="mx-auto max-w-xl">
      <Tabs.List variant="default">
        <Tabs.Trigger value="home">Home</Tabs.Trigger>
        <Tabs.Trigger value="profile">Profile</Tabs.Trigger>
        <Tabs.Trigger value="contact">Contact</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="home" className="py-4">
        Welcome back to your dashboard.
      </Tabs.Content>
      <Tabs.Content value="profile" className="py-4">
        View and edit your public profile.
      </Tabs.Content>
      <Tabs.Content value="contact" className="py-4">
        Reach out to the support team.
      </Tabs.Content>
    </Tabs>
  );
}

import { Tabs } from "@hummingbirdui/react";

export default function TabsColors() {
  return (
    <div className="mx-auto flex max-w-xl flex-col gap-8">
      <Tabs defaultValue="one">
        <Tabs.List variant="underline" color="success">
          <Tabs.Trigger value="one">Active</Tabs.Trigger>
          <Tabs.Trigger value="two">Pending</Tabs.Trigger>
          <Tabs.Trigger value="three">Archived</Tabs.Trigger>
        </Tabs.List>
        <Tabs.Content value="one" className="py-4">
          Records that are currently active.
        </Tabs.Content>
        <Tabs.Content value="two" className="py-4">
          Records awaiting approval.
        </Tabs.Content>
        <Tabs.Content value="three" className="py-4">
          Records that have been archived.
        </Tabs.Content>
      </Tabs>

      <Tabs defaultValue="alpha">
        <Tabs.List variant="underline" color="danger">
          <Tabs.Trigger value="alpha">Errors</Tabs.Trigger>
          <Tabs.Trigger value="beta">Warnings</Tabs.Trigger>
          <Tabs.Trigger value="gamma">Info</Tabs.Trigger>
        </Tabs.List>
        <Tabs.Content value="alpha" className="py-4">
          Failures that need attention.
        </Tabs.Content>
        <Tabs.Content value="beta" className="py-4">
          Non-blocking warnings.
        </Tabs.Content>
        <Tabs.Content value="gamma" className="py-4">
          Informational messages.
        </Tabs.Content>
      </Tabs>
    </div>
  );
}

import { Tabs } from "@hummingbirdui/react";

export default function TabsDisabled() {
  return (
    <Tabs defaultValue="general" className="mx-auto max-w-xl">
      <Tabs.List>
        <Tabs.Trigger value="general">General</Tabs.Trigger>
        <Tabs.Trigger value="billing" disabled>
          Billing
        </Tabs.Trigger>
        <Tabs.Trigger value="advanced">Advanced</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="general" className="py-4">
        General workspace preferences.
      </Tabs.Content>
      <Tabs.Content value="billing" className="py-4">
        Billing details are unavailable on this plan.
      </Tabs.Content>
      <Tabs.Content value="advanced" className="py-4">
        Advanced configuration options.
      </Tabs.Content>
    </Tabs>
  );
}