97 lines
4.4 KiB
PHP
97 lines
4.4 KiB
PHP
<x-filament::dropdown>
|
|
<x-slot name="trigger">
|
|
<template x-if="theme === 'light'">
|
|
<x-filament::button size="lg" icon="icon-soccerball" color="white" icon-size="md" x-ref="trigger">
|
|
Soccer
|
|
</x-filament::button>
|
|
</template>
|
|
<template x-if="theme === 'dark'">
|
|
<x-filament::icon-button size="lg" color="white" icon="heroicon-o-moon" icon-size="md"
|
|
icon-position="before" x-ref="trigger" />
|
|
</template>
|
|
<template x-if="theme === 'system'">
|
|
<x-filament::icon-button size="lg" color="white" icon="heroicon-o-computer-desktop" icon-size="md"
|
|
icon-position="before" x-ref="trigger" />
|
|
</template>
|
|
</x-slot>
|
|
<x-filament::dropdown.list class="flex flex-col gap-y-1" x-data="{ theme: null }" x-init="$watch('theme', () => {
|
|
$dispatch('theme-changed', theme)
|
|
})
|
|
theme = localStorage.getItem('theme') || 'system';">
|
|
<x-filament::dropdown.list.item icon="heroicon-o-sun" icon-size="md" icon-color="white" icon-position="before"
|
|
class="font-medium" x-on:click="(theme = 'light') && close()"
|
|
x-bind:class="theme === 'light'
|
|
?
|
|
'bg-gray-50 text-primary-500 dark:bg-white/5 dark:text-primary-400' :
|
|
'text-gray-400 hover:text-gray-500 focus-visible:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 dark:focus-visible:text-gray-400'">
|
|
<span
|
|
x-bind:class="theme === 'light'
|
|
?
|
|
'text-primary-500 dark:text-primary-400' :
|
|
'text-gray-950 dark:text-white'">
|
|
{{ __('Light') }}
|
|
</span>
|
|
</x-filament::dropdown.list.item>
|
|
<x-filament::dropdown.list.item icon="heroicon-o-moon" icon-size="md" icon-color="white" icon-position="before"
|
|
class="font-medium" x-on:click="(theme = 'dark') && close()"
|
|
x-bind:class="theme === 'dark'
|
|
?
|
|
'bg-gray-50 text-primary-500 dark:bg-white/5 dark:text-primary-400' :
|
|
'text-gray-400 hover:text-gray-500 focus-visible:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 dark:focus-visible:text-gray-400'">
|
|
<span
|
|
x-bind:class="theme === 'dark'
|
|
?
|
|
'text-primary-500 dark:text-primary-400' :
|
|
'text-gray-950 dark:text-white'">
|
|
{{ __('Dark') }}
|
|
</span>
|
|
</x-filament::dropdown.list.item>
|
|
<x-filament::dropdown.list.item icon="heroicon-o-computer-desktop" icon-size="md" icon-color="white"
|
|
icon-position="before" class="font-medium" x-on:click="(theme = 'system') && close()"
|
|
x-bind:class="theme === 'system'
|
|
?
|
|
'bg-gray-50 text-primary-500 dark:bg-white/5 dark:text-primary-400' :
|
|
'text-gray-400 hover:text-gray-500 focus-visible:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 dark:focus-visible:text-gray-400'">
|
|
<span
|
|
x-bind:class="theme === 'system'
|
|
?
|
|
'text-primary-500 dark:text-primary-400' :
|
|
'text-gray-950 dark:text-white'">
|
|
{{ __('System') }}
|
|
</span>
|
|
</x-filament::dropdown.list.item>
|
|
</x-filament::dropdown.list>
|
|
</x-filament::dropdown>
|
|
|
|
{{-- <x-filament::input.wrapper>
|
|
<x-filament::input.select wire:model="status">
|
|
<option value="1">Soccer</option>
|
|
<option value="2">Basketball</option>
|
|
<option value="3">Ice Hockey</option>
|
|
<option value="5">Tennis</option>
|
|
</x-filament::input.select>
|
|
</x-filament::input.wrapper>
|
|
--}}
|
|
|
|
{{-- <x-filament::input.wrapper prefix-icon="icon-soccerball">
|
|
<x-filament::input.select wire:model="status">
|
|
<option value="draft">Soccer</option>
|
|
<option value="reviewing">Reviewing</option>
|
|
<option value="published">Published</option>
|
|
</x-filament::input.select>
|
|
</x-filament::input.wrapper> --}}
|
|
{{-- <div class="flex">
|
|
<x-filament::button icon="icon-soccerball">
|
|
Soccer
|
|
</x-filament::button>
|
|
<x-filament::button icon="icon-basketball" color="gray">
|
|
Basketball
|
|
</x-filament::button>
|
|
<x-filament::button icon="icon-icehockey" color="gray">
|
|
Ice Hockey
|
|
</x-filament::button>
|
|
<x-filament::button icon="icon-tennisball" color="gray">
|
|
Tennis
|
|
</x-filament::button>
|
|
</div> --}}
|