vercel__ai-elements/apps/docs/components/geistdocs/code-block-tabs.tsx

import type { ComponentProps } from "react";

import { cn } from "@repo/shadcn-ui/lib/utils";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "fumadocs-ui/components/tabs.unstyled";

export const CodeBlockTabsList = (props: ComponentProps<typeof TabsList>) => (
  <TabsList
    {...props}
    className={cn(
      "w-full rounded-none border-b bg-sidebar px-2.5 text-muted-foreground",
      props.className
    )}
  >
    {props.children}
  </TabsList>
);

export const CodeBlockTabsTrigger = ({
  children,
  ...props
}: ComponentProps<typeof TabsTrigger>) => (
  <TabsTrigger
    {...props}
    className={cn(
      "group relative px-1 py-2 text-sm data-[state=active]:text-primary",
      props.className
    )}
  >
    <div className="absolute inset-x-0 bottom-0 h-px group-data-[state=active]:bg-primary" />
    {children}
  </TabsTrigger>
);

export const CodeBlockTabs = ({
  ref,
  ...props
}: ComponentProps<typeof Tabs>) => (
  <Tabs
    {...props}
    className={cn(
      "overflow-hidden rounded-sm border bg-background",
      props.className
    )}
  >
    {props.children}
  </Tabs>
);

export const CodeBlockTab = (props: ComponentProps<typeof TabsContent>) => (
  <TabsContent
    {...props}
    className={cn(
      "[&>div]:mb-0 [&_pre]:rounded-none [&_pre]:border-none",
      props.className
    )}
  />
);