Tabs

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'

export default function TabsBasic() {
  return (
    <Tabs defaultValue="overview" className="w-full max-w-lg">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="invoices">Invoices</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      <TabsContent value="overview" className="text-body-sm">
        Revenue this month: $48,210, up 12% from August.
      </TabsContent>
      <TabsContent value="invoices" className="text-body-sm">
        3 invoices are overdue. The oldest is 18 days late.
      </TabsContent>
      <TabsContent value="settings" className="text-body-sm">
        Invoices are sent from billing@northwind.example.
      </TabsContent>
    </Tabs>
  )
}