标签页

在标签页中显示多个代码块。

content.mdx

<CodeWithTabs>

```js !!tabs main.js
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  return sit ? consectetur(ipsum) : []
}
```

```css !!tabs styles.css
body {
  margin: 0;
  padding: 0;
}
```

</CodeWithTabs>

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  return sit ? consectetur(ipsum) : []
}

Implementation

我们使用来自 shadcn/ui 的 Tabs 组件：

npx shadcn@latest add tabs

然后创建一个组件来处理多个代码块作为标签页：

code.tsx

import { Block, CodeBlock, parseProps } from "codehike/blocks"
import { Pre, highlight } from "codehike/code"
import { z } from "zod"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

const Schema = Block.extend({ tabs: z.array(CodeBlock) })
async function CodeWithTabs(props: unknown) {
  const { tabs } = parseProps(props, Schema)
  return <CodeTabs tabs={tabs} />
}

export async function CodeTabs(props: { tabs: RawCode[] }) {
  const { tabs } = props
  const highlighted = await Promise.all(
    tabs.map((tab) => highlight(tab, "github-dark")),
  )
  return (
    <Tabs defaultValue={tabs[0]?.meta} className="">
      <TabsList className="">
        {tabs.map((tab) => (
          <TabsTrigger key={tab.meta} value={tab.meta}>
            {tab.meta}
          </TabsTrigger>
        ))}
      </TabsList>
      {tabs.map((tab, i) => (
        <TabsContent key={tab.meta} value={tab.meta} className="">
          <Pre code={highlighted[i]} className="" />
        </TabsContent>
      ))}
    </Tabs>
  )
}