Function ExampleTabs

apps/web/ui/example-tabs.tsx:15–43

({ hike }: any)

type TabsContent = z.infer<typeof TabsSchema>

export function ExampleTabs({ hike }: any) {
  const content = parseProps(hike, TabsSchema)
  const mdx = content.code.filter((code: any) => code.lang === "mdx")[0]
  const code = content.code.filter((code: any) => code.lang !== "mdx")
  const preview = content.preview

  return (
    <Tabs items={["Preview", "MDX", "Code"]}>
      <Tab
        value="Preview"
        className="bg-blue-500/30 mt-0 p-6 bg-[url(/dark-grid.svg)]"
      >
        <div
          className={`border border-primary/50 bg-zinc-950 rounded ${preview.title}`}
        >
          {preview.children}
        </div>
      </Tab>
      <Tab value="MDX">
        <MDX codeblock={mdx} />
      </Tab>
      <Tab value="Code">
        {code.map((codeblock: any, i: number) => (
          <Code key={i} codeblocks={[codeblock]} />
        ))}
      </Tab>
    </Tabs>
  )
}

async function MDX({ codeblock }: { codeblock: TabsContent["code"][0] }) {
  const info = await highlight(codeblock, "github-dark")