mirror of
https://github.com/HolgerHatGarKeineNode/einundzwanzig-nostr.git
synced 2026-01-28 07:43:18 +00:00
68 lines
2.1 KiB
PHP
68 lines
2.1 KiB
PHP
@aware([ 'variant' ])
|
|
|
|
@props([
|
|
'size' => null,
|
|
'variant' => null,
|
|
'scrollable' => false,
|
|
])
|
|
|
|
@php
|
|
if ($variant === 'pills') {
|
|
$classes = Flux::classes()
|
|
->add('flex gap-4 h-8')
|
|
;
|
|
} elseif ($variant === 'segmented') {
|
|
$classes = Flux::classes()
|
|
->add('inline-flex p-1')
|
|
->add($scrollable ? '' : 'rounded-lg bg-zinc-800/5 dark:bg-white/10')
|
|
->add($size === 'sm' ? 'h-[calc(2rem+2px)] py-[3px] px-[3px]' : 'h-10 p-1')
|
|
;
|
|
} else {
|
|
$classes = Flux::classes()
|
|
->add('flex gap-4 h-10 border-b')
|
|
->add($scrollable ? 'border-transparent' : 'border-zinc-800/10 dark:border-white/20')
|
|
;
|
|
}
|
|
|
|
$scrollableFade = $attributes->pluck('scrollable:fade', false);
|
|
$scrollableScrollbar = $attributes->pluck('scrollable:scrollbar', null);
|
|
|
|
$wrapperClasses = Flux::classes()
|
|
->add('relative')
|
|
->add($variant === 'segmented' ? 'rounded-lg bg-zinc-800/5 dark:bg-white/10' : '');
|
|
|
|
$borderClasses = Flux::classes()
|
|
->add('absolute inset-x-0 bottom-0 h-px')
|
|
->add($variant === null ? 'bg-zinc-800/10 dark:bg-white/20' : '')
|
|
;
|
|
|
|
$scrollAreaClasses = Flux::classes()
|
|
->add('relative flex overflow-auto')
|
|
->add($scrollableFade ? [
|
|
'[--flux-scroll-percentage:0%]', // This is controlled by JavaScript...
|
|
'mask-r-from-[max(calc(100%-6rem),var(--flux-scroll-percentage))]',
|
|
'rtl:mask-r-from-100% rtl:mask-l-from-[max(calc(100%-6rem),var(--flux-scroll-percentage))]',
|
|
] : '')
|
|
->add($scrollableScrollbar === 'hide' ? 'flux-no-scrollbar' : '')
|
|
->add($variant == 'segmented' ? 'rounded-lg' : '')
|
|
;
|
|
@endphp
|
|
|
|
<?php if ($scrollable): ?>
|
|
<div class="{{ $wrapperClasses }}">
|
|
<div class="{{ $borderClasses }}"></div>
|
|
|
|
<ui-tabs-scroll-area class="{{ $scrollAreaClasses }}">
|
|
<div class="min-w-full flex-none">
|
|
<ui-tabs {{ $attributes->class($classes) }} data-flux-tabs>
|
|
{{ $slot }}
|
|
</ui-tabs>
|
|
</div>
|
|
</ui-tabs-scroll-area>
|
|
</div>
|
|
<?php else: ?>
|
|
<ui-tabs {{ $attributes->class($classes) }} data-flux-tabs>
|
|
{{ $slot }}
|
|
</ui-tabs>
|
|
<?php endif; ?>
|