Tabs

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@jamie/ui/tabs'
 
export function TabsDemo() {
  return (
    <Tabs defaultValue="summary" className="w-[400px]">
      <TabsList>
        <TabsTrigger value="summary">Summary</TabsTrigger>
        <TabsTrigger value="transcript">Transcript</TabsTrigger>
        <TabsTrigger value="action-items">Action Items</TabsTrigger>
      </TabsList>
      <TabsContent value="summary">
        <div className="rounded-md border p-4 text-sm">
          <p className="font-medium">Q3 Earnings Review</p>
          <p className="mt-1 text-muted-foreground">
            Revenue exceeded forecast by 12%. The team agreed to revise Q4 targets upward and
            schedule a follow-up with the board next week.
          </p>
        </div>
      </TabsContent>
      <TabsContent value="transcript">
        <div className="rounded-md border p-4 text-sm text-muted-foreground">
          <p>
            <span className="font-medium text-foreground">Charles:</span> Let's start with the
            revenue numbers for Q3...
          </p>
          <p className="mt-2">
            <span className="font-medium text-foreground">Sasha:</span> We came in at $4.2M, which
            is 12% above our forecast...
          </p>
        </div>
      </TabsContent>
      <TabsContent value="action-items">
        <div className="rounded-md border p-4 text-sm">
          <ul className="list-disc pl-4 space-y-1 text-muted-foreground">
            <li>
              Revise Q4 revenue targets — <span className="text-foreground">Sasha</span>
            </li>
            <li>
              Schedule board follow-up — <span className="text-foreground">Charles</span>
            </li>
            <li>
              Prepare updated financial model — <span className="text-foreground">Jozo</span>
            </li>
          </ul>
        </div>
      </TabsContent>
    </Tabs>
  )
}

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@jamie/ui/tabs'
 
export function TabsLineDemo() {
  return (
    <Tabs defaultValue="overview" className="w-[400px]">
      <TabsList variant="line">
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="analytics">Analytics</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">
        <p className="text-sm text-muted-foreground pt-2">
          42 meetings recorded this month. Average duration: 34 minutes.
        </p>
      </TabsContent>
      <TabsContent value="analytics">
        <p className="text-sm text-muted-foreground pt-2">
          Most active day: Tuesday. Top speaker: Charles (CFO).
        </p>
      </TabsContent>
      <TabsContent value="settings">
        <p className="text-sm text-muted-foreground pt-2">
          Configure your meeting preferences and notification settings.
        </p>
      </TabsContent>
    </Tabs>
  )
}