45 lines
1.8 KiB
Svelte
45 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import AppLogoIcon from '@/components/AppLogoIcon.svelte';
|
|
import { type Appearance, useAppearance } from '@/hooks/useAppearance.svelte';
|
|
import { MonitorIcon, Moon, Sun } from 'lucide-svelte';
|
|
import Button from './ui/button/button.svelte';
|
|
import { Link } from '@inertiajs/svelte';
|
|
|
|
const appearanceManager = useAppearance();
|
|
// Create a local reactive variable that tracks the hook's value
|
|
let currentAppearance = $state(appearanceManager.appearance);
|
|
|
|
function handleUpdateAppearance(value: Appearance) {
|
|
appearanceManager.updateAppearance(value);
|
|
// Immediately update local state to ensure UI reflects the change
|
|
currentAppearance = value;
|
|
}
|
|
</script>
|
|
|
|
<div class="inline-flex w-full justify-around">
|
|
<div class="inline-flex items-center gap-3">
|
|
<div class="flex aspect-square size-8 shrink-0 items-center justify-center rounded-md">
|
|
<AppLogoIcon class="size-5 object-cover" />
|
|
</div>
|
|
<div class="flex items-center">
|
|
<Link href={route('home')} class="flex items-center gap-x-2">
|
|
<span class="truncate text-sm font-semibold">FlbxCup</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
{#if currentAppearance === 'light'}
|
|
<Button onclick={() => handleUpdateAppearance('dark')}>
|
|
<Sun class="h-4 w-4" />
|
|
</Button>
|
|
{:else if currentAppearance === 'dark'}
|
|
<Button onclick={() => handleUpdateAppearance('system')}>
|
|
<Moon class="h-4 w-4" />
|
|
</Button>
|
|
{:else}
|
|
<Button onclick={() => handleUpdateAppearance('light')}>
|
|
<MonitorIcon class="h-4 w-4" />
|
|
</Button>
|
|
{/if}
|
|
</div>
|
|
</div>
|