v10/site/src/components/docs/demos/Demo.astro

---
import type { BundledLanguage } from 'shiki';

import ServerCode from '@/components/Code/ServerCode.astro';
import { Tab, TabsList, TabsPanel, TabsRoot } from '@/components/Tabs';

interface FileTab {
  title: string;
  code: string;
  lang: BundledLanguage;
}

interface Props {
  files: FileTab[];
}

const { files } = Astro.props;
---

<div class="my-6 w-full max-w-3xl mx-auto flex flex-col rounded-lg overflow-hidden border border-light-40 dark:border-dark-80">
  <div class="relative z-20 bg-light-80 dark:bg-dark-100">
    <slot />
  </div>
  <TabsRoot client:idle maxWidth={false} className="my-0 rounded-none border-0 border-t border-light-40 dark:border-dark-80">
    <TabsList client:idle label="Demo source code">
      {files.map((file, i) => (
        <Tab client:idle value={file.title} initial={i === 0}>
          {file.title}
        </Tab>
      ))}
    </TabsList>
    {files.map((file, i) => (
      <TabsPanel client:idle value={file.title} initial={i === 0}>
        <ServerCode code={file.code} lang={file.lang} />
      </TabsPanel>
    ))}
  </TabsRoot>
</div>