mirror of
https://github.com/HolgerHatGarKeineNode/einundzwanzig-nostr.git
synced 2026-01-28 07:43:18 +00:00
🎨 Add new Flux icons: implement multiple reusable icon components (e.g., hand-raised, hand-thumb-up, heart, hashtag, home) with variant support for improved UI consistency.
This commit is contained in:
50
resources/views/flux/select/variants/default.blade.php
Normal file
50
resources/views/flux/select/variants/default.blade.php
Normal file
@@ -0,0 +1,50 @@
|
||||
@blaze
|
||||
|
||||
@props([
|
||||
'name' => $attributes->whereStartsWith('wire:model')->first(),
|
||||
'placeholder' => null,
|
||||
'invalid' => null,
|
||||
'size' => null,
|
||||
])
|
||||
|
||||
@php
|
||||
$invalid ??= ($name && $errors->has($name));
|
||||
|
||||
$classes = Flux::classes()
|
||||
->add('appearance-none') // Strip the browser's default <select> styles...
|
||||
->add('[:where(&)]:w-full ps-3 pe-10 block')
|
||||
->add(match ($size) {
|
||||
default => 'h-10 py-2 text-base sm:text-sm leading-[1.375rem] rounded-lg',
|
||||
'sm' => 'h-8 py-1.5 text-sm leading-[1.125rem] rounded-lg',
|
||||
'xs' => 'h-6 text-xs leading-[1.125rem] rounded-lg',
|
||||
})
|
||||
->add('shadow-xs border')
|
||||
->add('bg-white dark:bg-white/10 dark:disabled:bg-white/[7%]')
|
||||
->add('text-zinc-700 dark:text-zinc-300 disabled:text-zinc-500 dark:disabled:text-zinc-400')
|
||||
// Make the placeholder match the text color of standard input placeholders...
|
||||
->add('has-[option.placeholder:checked]:text-zinc-400 dark:has-[option.placeholder:checked]:text-zinc-400')
|
||||
// Options on Windows don't inherit dark mode styles, so we need to force them...
|
||||
->add('dark:[&>option]:bg-zinc-700 dark:[&>option]:text-white')
|
||||
->add('disabled:shadow-none')
|
||||
->add($invalid
|
||||
? 'border border-red-500'
|
||||
: 'border border-zinc-200 border-b-zinc-300/80 dark:border-white/10'
|
||||
)
|
||||
;
|
||||
@endphp
|
||||
|
||||
<select
|
||||
{{ $attributes->class($classes) }}
|
||||
@if ($invalid) aria-invalid="true" data-invalid @endif
|
||||
@isset ($name) name="{{ $name }}" @endisset
|
||||
@if (is_numeric($size)) size="{{ $size }}" @endif
|
||||
data-flux-control
|
||||
data-flux-select-native
|
||||
data-flux-group-target
|
||||
>
|
||||
<?php if ($placeholder): ?>
|
||||
<option value="" disabled selected class="placeholder">{{ $placeholder }}</option>
|
||||
<?php endif; ?>
|
||||
|
||||
{{ $slot }}
|
||||
</select>
|
||||
Reference in New Issue
Block a user