feat: ✨ Add mode watcher.

epsilon-records · Jul 29, 2024 · 4595f4b · 4595f4b
1 parent 65abb08
commit 4595f4b
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 24 deletions.
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -12,8 +12,10 @@
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
 	import { Input } from '$lib/components/ui/input/index.js';
 	import * as Sheet from '$lib/components/ui/sheet/index.js';
-	import logo from '$lib/images/logo.png';
 	import UserButton from 'clerk-sveltekit/client/UserButton.svelte';
+	import Sun from 'lucide-svelte/icons/sun';
+	import Moon from 'lucide-svelte/icons/moon';
+	import { resetMode, setMode } from 'mode-watcher';
 </script>
 
 <header
@@ -79,25 +81,23 @@
 			class="w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]"
 		/>
 	</div>
-	<UserButton afterSignOutUrl="/" />
 	<DropdownMenu.Root>
 		<DropdownMenu.Trigger asChild let:builder>
-			<Button
-				variant="outline"
-				size="icon"
-				class="overflow-hidden rounded-full"
-				builders={[builder]}
-			>
-				<img src={logo} width={36} height={36} alt="Avatar" class="overflow-hidden rounded-full" />
+			<Button builders={[builder]} variant="ghost" size="icon">
+				<Sun
+					class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+				/>
+				<Moon
+					class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+				/>
+				<span class="sr-only">Toggle theme</span>
 			</Button>
 		</DropdownMenu.Trigger>
 		<DropdownMenu.Content align="end">
-			<DropdownMenu.Label>My Account</DropdownMenu.Label>
-			<DropdownMenu.Separator />
-			<DropdownMenu.Item>Settings</DropdownMenu.Item>
-			<DropdownMenu.Item>Support</DropdownMenu.Item>
-			<DropdownMenu.Separator />
-			<DropdownMenu.Item>Logout</DropdownMenu.Item>
+			<DropdownMenu.Item on:click={() => setMode('light')}>Light</DropdownMenu.Item>
+			<DropdownMenu.Item on:click={() => setMode('dark')}>Dark</DropdownMenu.Item>
+			<DropdownMenu.Item on:click={() => resetMode()}>System</DropdownMenu.Item>
 		</DropdownMenu.Content>
 	</DropdownMenu.Root>
+	<UserButton afterSignOutUrl="/" />
 </header>
diff --git a/src/lib/components/Music.svelte b/src/lib/components/Music.svelte
@@ -5,14 +5,9 @@
 	import Sidebar from '$lib/components/Sidebar.svelte';
 </script>
 
-<Menu />
-<div class="border-t bg-background">
-	<div class="grid lg:grid-cols-5">
-		<Sidebar {playlists} class="hidden lg:block" />
-		<div class="col-span-3 lg:col-span-4 lg:border-l">
-			<div class="h-full px-4 py-6 lg:px-8">
-				<MusicTabs></MusicTabs>
-			</div>
-		</div>
+<div class="grid border-t bg-background lg:grid-cols-5">
+	<Sidebar {playlists} class="hidden lg:block" />
+	<div class="col-span-3 h-full px-4 py-6 lg:col-span-4 lg:border-l lg:px-8">
+		<MusicTabs></MusicTabs>
 	</div>
 </div>
diff --git a/src/routes/(main)/music/+page.svelte b/src/routes/(main)/music/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import Music from '$lib/components/Music.svelte';
+</script>
+
+<Music />
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Footer from '$lib/components/Footer.svelte';
 	import '$src/app.css';
+	import { ModeWatcher } from 'mode-watcher';
 	import { QueryClientProvider } from '@tanstack/svelte-query';
 	import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools';
 	import type { LayoutData, LayoutServerData } from './$types';
@@ -22,6 +23,7 @@
 		<QueryClientProvider client={data.queryClient}>
 			<slot />
 			<Footer></Footer>
+			<ModeWatcher />
 			<Toaster></Toaster>
 			<SvelteQueryDevtools></SvelteQueryDevtools>
 		</QueryClientProvider>