einundzwanzig/einundzwanzig-verein
1
0
Fork 0
mirror of https://github.com/HolgerHatGarKeineNode/einundzwanzig-nostr.git synced 2026-01-28 07:43:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎨 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.

Browse Source
This commit is contained in:
HolgerHatGarKeineNode
2026-01-23 23:00:02 +01:00
parent 578e4f13fc
commit b30fec150c
792 changed files with 307541 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
resources/views/flux/navlist/item.blade.php Normal file
View File

@@ -0,0 +1,90 @@
@php $iconTrailing ??= $attributes->pluck('icon:trailing'); @endphp
@php $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
@aware([ 'variant' ])
@props([
'iconVariant' => 'outline',
'iconTrailing' => null,
'badgeColor' => null,
'variant' => null,
'iconDot' => null,
'accent' => true,
'badge' => null,
'icon' => null,
])
@php
// Button should be a square if it has no text contents...
$square ??= $slot->isEmpty();
// Size-up icons in square/icon-only buttons...
$iconClasses = Flux::classes($square ? 'size-5!' : 'size-4!');
$classes = Flux::classes()
->add('h-10 lg:h-8 relative flex items-center gap-3 rounded-lg')
->add($square ? 'px-2.5!' : '')
->add('py-0 text-start w-full px-3 my-px')
->add('text-zinc-500 dark:text-white/80')
->add(match ($variant) {
'outline' => match ($accent) {
true => [
'data-current:text-(--color-accent-content) hover:data-current:text-(--color-accent-content)',
'data-current:bg-white dark:data-current:bg-white/[7%] data-current:border data-current:border-zinc-200 dark:data-current:border-transparent',
'hover:text-zinc-800 dark:hover:text-white dark:hover:bg-white/[7%] hover:bg-zinc-800/5 ',
'border border-transparent',
],
false => [
'data-current:text-zinc-800 dark:data-current:text-zinc-100 data-current:border-zinc-200',
'data-current:bg-white dark:data-current:bg-white/10 data-current:border data-current:border-zinc-200 dark:data-current:border-white/10 data-current:shadow-xs',
'hover:text-zinc-800 dark:hover:text-white',
],
},
default => match ($accent) {
true => [
'data-current:text-(--color-accent-content) hover:data-current:text-(--color-accent-content)',
'data-current:bg-zinc-800/[4%] dark:data-current:bg-white/[7%]',
'hover:text-zinc-800 dark:hover:text-white hover:bg-zinc-800/[4%] dark:hover:bg-white/[7%]',
],
false => [
'data-current:text-zinc-800 dark:data-current:text-zinc-100',
'data-current:bg-zinc-800/[4%] dark:data-current:bg-white/10',
'hover:text-zinc-800 dark:hover:text-white hover:bg-zinc-800/[4%] dark:hover:bg-white/10',
],
},
})
;
@endphp
<flux:button-or-link :attributes="$attributes->class($classes)" data-flux-navlist-item>
<?php if ($icon): ?>
<div class="relative">
<?php if (is_string($icon) && $icon !== ''): ?>
<flux:icon :$icon :variant="$iconVariant" class="{!! $iconClasses !!}" />
<?php else: ?>
{{ $icon }}
<?php endif; ?>
<?php if ($iconDot): ?>
<div class="absolute top-[-2px] end-[-2px]">
<div class="size-[6px] rounded-full bg-zinc-500 dark:bg-zinc-400"></div>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<?php if ($slot->isNotEmpty()): ?>
<div class="flex-1 text-sm font-medium leading-none whitespace-nowrap [[data-nav-footer]_&]:hidden [[data-nav-sidebar]_[data-nav-footer]_&]:block" data-content>{{ $slot }}</div>
<?php endif; ?>
<?php if (is_string($iconTrailing) && $iconTrailing !== ''): ?>
<flux:icon :icon="$iconTrailing" :variant="$iconVariant" class="size-4!" />
<?php elseif ($iconTrailing): ?>
{{ $iconTrailing }}
<?php endif; ?>
<?php if (isset($badge) && $badge !== ''): ?>
<?php $badgeAttributes = Flux::attributesAfter('badge:', $attributes, ['color' => $badgeColor]); ?>
<flux:navlist.badge :attributes="$badgeAttributes">{{ $badge }}</flux:navlist.badge>
<?php endif; ?>
</flux:button-or-link>