Tabs — React

---
import Tabs from '../components/astro/Tabs.astro';
---

<Tabs tabs={[{ id: 'one', label: 'Tab One' }, { id: 'two', label: 'Tab Two' }]} defaultTab="one">
  <div slot="one"><p>Content for Tab One.</p></div>
  <div slot="two"><p>Content for Tab Two.</p></div>
</Tabs>

<!-- Rizzo CSS + component script (from package or vanilla docs). -->
<div class="tabs" data-tabs>
  <div class="tabs__list" role="tablist">...</div>
  <div class="tabs__panel" role="tabpanel">...</div>
</div>

<script>
  import { Tabs } from '$lib/rizzo';
</script>

<Tabs tabs={[{ id: 'one', label: 'Tab One' }, { id: 'two', label: 'Tab Two' }]} defaultTab="one">
  {#snippet children(activeTabId)}
    <p>Content for {activeTabId}</p>
  {/snippet}
</Tabs>

<script setup>
import Tabs from '@/components/rizzo/Tabs.vue';
</script>

<template>
  <Tabs
    :tabs="[
      { id: 'one', label: 'Tab One' },
      { id: 'two', label: 'Tab Two' },
    ]"
    default-tab="one"
  >
    <template #content="{ activeId }">
      <p>Content for {{ activeId }}</p>
    </template>
  </Tabs>
</template>

import { Tabs } from './components/react';

<Tabs
  tabs={[
    { id: 'one', label: 'Tab One' },
    { id: 'two', label: 'Tab Two' },
  ]}
  defaultTab="one"
>
  {(activeId) => <p>Content for {activeId}</p>}
</Tabs>