<Tabs>
  <Tab label="A">
    A: Doggo ipsum wow such tempt snoot tungg long
    woofer doggorino, aqua doggo boofers doggorino...
  </Tab>
  <Tab label="B">
    B: Doggo ipsum very hand that feed shibe fluffer
    tungg boofers shooberino you are doin me a concern...
  </Tab>
  <Tab label="C">
    C: Doggo ipsum long doggo long woofer heckin you
    are doing me the shock boof maximum borkdrive...
  </Tab>
</Tabs>

<script>
import { Icon } from 'spaper';
import { House, User, Settings } from 'spaper/icons';
</script>

<Tabs>
  <Tab label="Home" icon={House}>Welcome home</Tab>
  <Tab label="Account" icon={User}>Account details</Tab>
  <Tab label="Settings" icon={Settings}>Preferences</Tab>
</Tabs>

<Tabs>
  <Tab label="Home">
    {#snippet header()}
      <span class="flex gap-1.5">
        <Icon name={House} size={18} /> Home
      </span>
    {/snippet}
    Welcome home
  </Tab>
  <Tab label="Account">
    {#snippet header()}
      <span class="flex gap-1.5">
        <Icon name={User} size={18} /> Account
      </span>
    {/snippet}
    Account details
  </Tab>
  <Tab label="Settings">
    {#snippet header()}
      <span class="flex gap-1.5">
        <Icon name={Settings} size={18} /> Settings
      </span>
    {/snippet}
    Preferences
  </Tab>
</Tabs>

<Tabs>
  <Tab label="A">spaces (default)</Tab>
  <Tab label="B">spaces (default)</Tab>
  <Tab label="C">spaces (default)</Tab>
</Tabs>

<Divider />

<Tabs placement="edges">
  <Tab label="A">edges</Tab>
  <Tab label="B">edges</Tab>
  <Tab label="C">edges</Tab>
</Tabs>

<Divider />

<Tabs placement="right">
  <Tab label="A">right</Tab>
  <Tab label="B">right</Tab>
  <Tab label="C">right</Tab>
</Tabs>

<Divider />

<Tabs placement="center">
  <Tab label="A">center</Tab>
  <Tab label="B">center</Tab>
  <Tab label="C">center</Tab>
</Tabs>

<Divider />

<Tabs placement="left">
  <Tab label="A">left</Tab>
  <Tab label="B">left</Tab>
  <Tab label="C">left</Tab>
</Tabs>

<script>
  let selected = 2;
</script>

<Select label="Active tab"
        bind:value={selected}>
  <option value={0}>A</option>
  <option value={1}>B</option>
  <option value={2}>C</option>
</Select>

<Tabs bind:activeTab={selected}>
  <Tab label="A">A</Tab>
  <Tab label="B">B</Tab>
  <Tab label="C">C</Tab>
</Tabs>