basecoat/docs/_includes/partials/kitchen-sink/tabs.njk

{% from "components/tabs.njk" import tabs %}

<section id="tabs" class="w-full rounded-lg border scroll-mt-16">
  <header class="border-b px-4 py-3">
    <h2 class="text-sm font-medium">Tabs</h2>
  </header>
  <div class="p-4">
    <div class="flex flex-col gap-6">
      {% set account_panel %}
        <div class="card">
          <header>
            <h2>Account</h2>
            <p>Make changes to your account here. Click save when you're done.</p>
          </header>
          <section>
            <form class="form grid gap-6">
              <div class="grid gap-3">
                <label for="demo-tabs-account-name">Name</label>
                <input type="text" id="demo-tabs-account-name" value="Pedro Duarte" />
              </div>
              <div class="grid gap-3">
                <label for="demo-tabs-account-username">Username</label>
                <input type="text" id="demo-tabs-account-username" value="@peduarte" />
              </div>
            </form>
          </section>
          <footer>
            <button type="button" class="btn">Save changes</button>
          </footer>
        </div>
      {% endset %}
      {% set password_panel %}
        <div class="card">
          <header>
            <h2>Password</h2>
            <p>Change your password here. After saving, you'll be logged out.</p>
          </header>
          <section>
            <form class="form grid gap-6">
              <div class="grid gap-3">
                <label for="demo-tabs-password-current">Current password</label>
                <input type="password" id="demo-tabs-password-current" />
              </div>
              <div class="grid gap-3">
                <label for="demo-tabs-password-new">New password</label>
                <input type="password" id="demo-tabs-password-new"/>
              </div>
            </form>
          </section>
          <footer>
            <button type="button" class="btn">Save Password</button>
          </footer>
        </div>
      {% endset %}
      {% set tabsets = [
        { tab: "Account", panel: account_panel },
        { tab: "Password", panel: password_panel }
      ] %}
      {{ tabs(
        id='demo-tabs-with-panels',
        tabsets=tabsets,
        main_attrs={ "class": "max-w-[300px]" },
        tablist_attrs={ "class": "w-full" }
      ) }}

      {% set tabsets = [
        { tab: "Home" },
        { tab: "Settings" }
      ] %}
      {{ tabs(
        id='demo-tabs-without-panels',
        tabsets=tabsets
      ) }}

      {% set tabsets = [
        { tab: "Home" },
        { tab: "Disabled", tab_attrs: { "disabled": "disabled" } }
      ] %}
      {{ tabs(
        id='demo-tabs-disabled',
        tabsets=tabsets
      ) }}
      
      {% set label_preview %}
        {% lucide 'app-window' %}
        Preview
      {% endset %}
      {% set label_code %}
        {% lucide 'code' %}
        Code
      {% endset %}
      {% set tabsets = [
        { tab: label_preview },
        { tab: label_code }
      ] %}
      {{ tabs(
        id='demo-tabs-with-icons',
        tabsets=tabsets
      ) }}
    </div>
  </div>
</section>