{% stories tabscontent with { title: 'Components/Tailpine Tabs' } %}

{% story working_example with {
    name: '1. Tab Content - Working Multi-tab Example',
    args: { 
      children: '<div x-data="{ activeTab: \'home\' }" class="w-full bg-gray-100 dark:bg-gray-900 p-6">
  <div class="w-full flex border-b-2 border-gray-400 mb-6">
    <button
      type="button"
      x-on:click="activeTab = \'home\'"
      x-bind:class="activeTab === \'home\' ? \'border-b-2 border-primary text-primary\' : \'\'"
      class="border-b-2 border-body-bg w-1/3 py-3 text-body dark:text-gray-100 font-bold transition-all duration-200"
      role="tab"
    >
      Home
    </button>
    <button
      type="button"
      x-on:click="activeTab = \'about\'"
      x-bind:class="activeTab === \'about\' ? \'border-b-2 border-primary text-primary\' : \'\'"
      class="border-b-2 border-body-bg w-1/3 py-3 text-body dark:text-gray-100 font-bold transition-all duration-200"
      role="tab"
    >
      About
    </button>
    <button
      type="button"
      x-on:click="activeTab = \'contact\'"
      x-bind:class="activeTab === \'contact\' ? \'border-b-2 border-primary text-primary\' : \'\'"
      class="border-b-2 border-body-bg w-1/3 py-3 text-body dark:text-gray-100 font-bold transition-all duration-200"
      role="tab"
    >
      Contact
    </button>
  </div>
  <div class="bg-white dark:bg-gray-800 p-6 border border-gray-200 dark:border-gray-700">
    <div 
      x-show="activeTab === \'home\'"
      x-transition:enter="transition ease-out duration-200"
      x-transition:enter-start="opacity-0"
      x-transition:enter-end="opacity-100"
      role="tabpanel"
    >
      <div class="space-y-4">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Home Tab</h2>
        <p class="text-gray-700 dark:text-gray-300">Welcome to the home tab. This demonstrates the underline tab style with smooth transitions.</p>
      </div>
    </div>
    <div 
      x-show="activeTab === \'about\'"
      x-transition:enter="transition ease-out duration-200"
      x-transition:enter-start="opacity-0"
      x-transition:enter-end="opacity-100"
      role="tabpanel"
    >
      <div class="space-y-4">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">About Tab</h2>
        <p class="text-gray-700 dark:text-gray-300">Learn more about our platform and features in this about section.</p>
      </div>
    </div>
    <div 
      x-show="activeTab === \'contact\'"
      x-transition:enter="transition ease-out duration-200"
      x-transition:enter-start="opacity-0"
      x-transition:enter-end="opacity-100"
      role="tabpanel"
    >
      <div class="space-y-4">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Contact Tab</h2>
        <p class="text-gray-700 dark:text-gray-300">Get in touch with us through this contact section.</p>
      </div>
    </div>
  </div>
</div>
'
    }
  } %}
{% embed 'components:tabscontent' %}
  {% block children %}
    {{ children }}
  {% endblock %}
{% endembed %}
{% endstory %}

{% endstories %}
