47 lines
2.0 KiB
PHP
47 lines
2.0 KiB
PHP
@pure
|
|
|
|
@php $tooltipPosition = $tooltipPosition ??= $attributes->pluck('tooltip:position'); @endphp
|
|
@php $tooltipKbd = $tooltipKbd ??= $attributes->pluck('tooltip:kbd'); @endphp
|
|
@php $tooltip = $tooltip ??= $attributes->pluck('tooltip'); @endphp
|
|
|
|
@props([
|
|
'tooltipPosition' => 'right',
|
|
'placeholder' => __('Search...'),
|
|
'tooltipKbd' => null,
|
|
'tooltip' => null,
|
|
])
|
|
|
|
@php
|
|
$tooltip = $tooltip ?? $placeholder;
|
|
|
|
$tooltipClasses = Flux::classes()
|
|
->add('w-full')
|
|
->add('in-data-flux-sidebar-header:in-data-flux-sidebar-collapsed-desktop:in-data-flux-sidebar-active:hidden')
|
|
;
|
|
|
|
$classes = Flux::classes()
|
|
->add('h-10 py-2 px-3 w-full border rounded-lg block disabled:shadow-none dark:shadow-none appearance-none text-base sm:text-sm leading-[1.375rem] bg-zinc-800/5 dark:bg-white/10 dark:disabled:bg-white/[7%] text-zinc-700 placeholder-zinc-500 disabled:placeholder-zinc-400 dark:text-zinc-200 dark:placeholder-white/60 dark:disabled:placeholder-white/40 border-0 relative flex gap-3')
|
|
->add('in-data-flux-sidebar-on-mobile:h-10 in-data-flux-sidebar-collapsed-desktop:px-3')
|
|
->add('in-data-flux-sidebar-header:in-data-flux-sidebar-collapsed-desktop:in-data-flux-sidebar-active:hidden')
|
|
;
|
|
@endphp
|
|
|
|
<flux:tooltip :position="$tooltipPosition" :class="$tooltipClasses">
|
|
<button
|
|
{{ $attributes->class($classes) }}
|
|
type="button"
|
|
data-flux-sidebar-search
|
|
>
|
|
<div class="flex items-center justify-center text-xs text-zinc-400/75 start-0">
|
|
<flux:icon class="size-4" icon="magnifying-glass" variant="outline" />
|
|
</div>
|
|
|
|
<div class="in-data-flux-sidebar-collapsed-desktop:hidden block self-center text-start flex-1 font-medium text-zinc-400 dark:text-white/40">
|
|
{{ $placeholder }}
|
|
</div>
|
|
</button>
|
|
|
|
<flux:tooltip.content :kbd="$tooltipKbd" class="not-in-data-flux-sidebar-collapsed-desktop:hidden cursor-default">
|
|
{{ $tooltip }}
|
|
</flux:tooltip.content>
|
|
</flux:tooltip> |