47 lines
2.6 KiB
PHP
47 lines
2.6 KiB
PHP
<x-filament-panels::page wire:init="loadColorSet">
|
|
@if(!$colorSetLoaded)
|
|
<x-filament::section>
|
|
<div class="flex items-center justify-center gap-2 py-12">
|
|
<x-filament::loading-indicator class="h-5 w-5 text-gray-400 dark:text-gray-500" />
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">{{ trans('blockland-config::blockland-config.loading_colorset') }}</span>
|
|
</div>
|
|
</x-filament::section>
|
|
@else
|
|
<div class="flex flex-col gap-6">
|
|
{{-- Color count summary --}}
|
|
<x-filament::section>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<x-filament::icon icon="tabler-palette" class="h-5 w-5 text-primary-500 dark:text-primary-400 shrink-0" />
|
|
<span class="text-sm font-medium text-gray-950 dark:text-white">{{ trans('blockland-config::blockland-config.colorset.active_palette') }}</span>
|
|
</div>
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">{{ trans('blockland-config::blockland-config.colorset.color_count', ['count' => $this->totalColors, 'max' => 64]) }}</span>
|
|
</div>
|
|
</x-filament::section>
|
|
|
|
{{-- Swatch preview per section --}}
|
|
@forelse($this->colorSetPreview as $section)
|
|
<x-filament::section
|
|
:heading="$section['label']"
|
|
:description="count($section['colors']) . ' ' . (count($section['colors']) === 1 ? 'color' : 'colors')"
|
|
>
|
|
<div class="flex flex-wrap gap-2">
|
|
@foreach($section['colors'] as $color)
|
|
<div
|
|
class="shrink-0 w-10 h-10 rounded-lg border-0 dark:border dark:border-gray-600 shadow-sm"
|
|
style="background-color: rgba({{ $color['r'] }}, {{ $color['g'] }}, {{ $color['b'] }}, {{ round($color['a'] / 255, 2) }});"
|
|
title="R:{{ $color['r'] }} G:{{ $color['g'] }} B:{{ $color['b'] }} A:{{ $color['a'] }}"
|
|
></div>
|
|
@endforeach
|
|
</div>
|
|
</x-filament::section>
|
|
@empty
|
|
<x-filament::empty-state
|
|
icon="tabler-palette-off"
|
|
:heading="trans('blockland-config::blockland-config.colorset.no_colorset')"
|
|
/>
|
|
@endforelse
|
|
</div>
|
|
@endif
|
|
</x-filament-panels::page>
|