setting up front 1

resources/views/components/ui/tabs.blade.php

@@ -0,0 +1,50 @@
+@props(['tabs' => [], 'size' => 'md'])
+@php
+    $sizeClasses = match($size) {
+        'lg'    => 'text-[36px] font-extrabold [--slide-h:5px]',
+        default => 'text-xl font-bold [--slide-h:3px]',
+    };
+@endphp
+
+{{--
+    Usage:
+    <x-ui.tabs :tabs="[
+        ['id' => 'description', 'label' => 'Description'],
+        ['id' => 'info',        'label' => 'Additional information'],
+        ['id' => 'reviews',     'label' => 'Reviews (0)'],
+    ]">
+        <x-slot name="description">...</x-slot>
+        <x-slot name="info">...</x-slot>
+        <x-slot name="reviews">...</x-slot>
+    </x-ui.tabs>
+--}}
+
+<div data-controller="tabs" {{ $attributes }}>
+    <div class="flex gap-10 mb-8" role="tablist">
+        @foreach($tabs as $i => $tab)
+            <button
+                type="button"
+                role="tab"
+                data-tabs-target="button"
+                data-action="click->tabs#show"
+                data-panel="{{ $tab['id'] }}"
+                class="underline-slide font-display pb-1 {{ $sizeClasses }} {{ $i === 0 ? 'is-active' : '' }}"
+                aria-selected="{{ $i === 0 ? 'true' : 'false' }}"
+                aria-controls="tab-panel-{{ $tab['id'] }}"
+                id="tab-btn-{{ $tab['id'] }}"
+            >{{ $tab['label'] }}</button>
+        @endforeach
+    </div>
+
+    @foreach($tabs as $i => $tab)
+        @php $panelKey = $tab['id']; $panel = $$panelKey ?? null; @endphp
+        <div
+            role="tabpanel"
+            data-tabs-target="panel"
+            id="tab-panel-{{ $tab['id'] }}"
+            aria-labelledby="tab-btn-{{ $tab['id'] }}"
+            tabindex="0"
+            @if($i !== 0) hidden @endif
+        >{{ $panel }}</div>
+    @endforeach
+</div>