homepage and logo

resources/js/components/AppLogo.svelte

@@ -1,12 +1,45 @@
 <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 items-center gap-3">
-    <div class="flex aspect-square size-8 shrink-0 items-center justify-center rounded-md bg-sidebar-primary">
-        <AppLogoIcon class="size-5 fill-current text-white! dark:text-black!" />
+<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">
-        <span class="truncate text-sm font-semibold">Laravel Starter Kit</span>
+        {#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>