Default, line and vertical

// apps/docs/examples/ui/tabs.tsx'use client';
import {  Tabs,  TabsContent,  TabsList,  TabsTrigger,} from '@workspace/active-ui/components/primitives/tabs';
const PANELS = [  [    'overview',    'Overview',    'The scheme has 214 participants and runs since 2019.',  ],  [    'participants',    'Participants',    '198 active, 12 deferred and 4 retired members.',  ],  [    'documents',    'Documents',    'Regulations, the last statement and two notices.',  ],] as const;
/** * Views of the same subject, one at a time: the default and the `line` * variant, and a vertical list. The arrow keys move between the tabs, and * Enter or Space shows the panel of the focused tab. */export default function TabsExample() {  return (    <div className="grid w-full max-w-lg gap-10">      <Tabs defaultValue="overview">        <TabsList aria-label="Scheme">          {PANELS.map(([value, label]) => (            <TabsTrigger key={value} value={value}>              {label}            </TabsTrigger>          ))}        </TabsList>        {PANELS.map(([value, , text]) => (          <TabsContent key={value} value={value} className="pt-3">            {text}          </TabsContent>        ))}      </Tabs>
      <Tabs defaultValue="participants">        <TabsList variant="line" aria-label="Scheme, line tabs">          {PANELS.map(([value, label]) => (            <TabsTrigger key={value} value={value}>              {label}            </TabsTrigger>          ))}        </TabsList>        {PANELS.map(([value, , text]) => (          <TabsContent key={value} value={value} className="pt-3">            {text}          </TabsContent>        ))}      </Tabs>
      <Tabs defaultValue="documents" orientation="vertical">        <TabsList aria-label="Scheme, vertical tabs">          {PANELS.map(([value, label]) => (            <TabsTrigger key={value} value={value}>              {label}            </TabsTrigger>          ))}        </TabsList>        {PANELS.map(([value, , text]) => (          <TabsContent key={value} value={value} className="ps-3">            {text}          </TabsContent>        ))}      </Tabs>    </div>  );}