Tabs

import { Tabs } from 'boltdocs/primitives'

import React, { useState } from 'react'
import { Tabs } from 'boltdocs/primitives'

export default function CustomTabs() {
  const [activeTab, setActiveTab] = useState('tab-1')

  return (
    <Tabs>
      <Tabs.List className="border-b border-subtle mb-4">
        <Tabs.Item
          id="tab-1"
          selected={activeTab === 'tab-1'}
          onClick={() => setActiveTab('tab-1')}
          className="px-4 py-2 text-sm font-semibold data-[selected=true]:text-primary-500 border-b-2 border-transparent data-[selected=true]:border-primary-500"
        >
          Descripción General
        </Tabs.Item>
        <Tabs.Item
          id="tab-2"
          selected={activeTab === 'tab-2'}
          onClick={() => setActiveTab('tab-2')}
          className="px-4 py-2 text-sm font-semibold data-[selected=true]:text-primary-500 border-b-2 border-transparent data-[selected=true]:border-primary-500"
        >
          Referencia de API
        </Tabs.Item>
      </Tabs.List>

      <Tabs.Content>
        {activeTab === 'tab-1' && <div>Panel de descripción general del contenido...</div>}
        {activeTab === 'tab-2' && <div>Descripción detallada de la referencia de API...</div>}
      </Tabs.Content>
    </Tabs>
  )
}