Tabs Block

1import { tabsBlock, type TabData } from '@contentbit/blocks'
2import { defineBlockComponent } from '@contentbit/react'
3 
4import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
5import { isValidatedBlock } from '@contentbit/core'
6 
7export const TabsBlock = defineBlockComponent(tabsBlock, ({ node, ctx }) => {
8  const data = node.data
9  return (
10    <Tabs data-cb-styled defaultValue="tab-0" className="my-6">
11      <TabsList>
12        {data.blocks.map((tab, i) => (
13          <TabsTrigger key={i} value={`tab-${i}`}>
14            {String(tab.props.title)}
15          </TabsTrigger>
16        ))}
17      </TabsList>
18      {data.blocks.map((tab, i) => (
19        <TabsContent key={i} value={`tab-${i}`} className="text-sm leading-relaxed">
20          {ctx.renderMarkdown(isValidatedBlock(tab) ? (tab.data as TabData).markdown : tab.body)}
21        </TabsContent>
22      ))}
23    </Tabs>
24  )
25})