feat: add ui kit page

2026-09-14 21:46:35 +00:00 · 2026-08-27 21:35:01 +05:00
parent 8437c95a28
commit 06d185add6
6 changed files with 332 additions and 6 deletions
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import "$lib/styles/design2.css";
+	import type { Snippet } from "svelte";
+	import AppShell from "$lib/components/kit/AppShell.svelte";
+	import IconButton from "$lib/components/kit/IconButton.svelte";
+	import { Sun, Moon } from "@lucide/svelte";
+
+	interface Props {
+		children: Snippet;
+	}
+	let { children }: Props = $props();
+
+	let theme = $state<"light" | "dark">("light");
+	function toggle() {
+		theme = theme === "light" ? "dark" : "light";
+	}
+</script>
+
+<div class="preview-root" data-theme={theme}>
+	<AppShell>{@render children()}</AppShell>
+	<div class="theme-switch">
+		<IconButton
+			icon={theme === "light" ? Moon : Sun}
+			label="Toggle theme"
+			onclick={toggle}
+		/>
+	</div>
+</div>
+
+<style>
+	.preview-root {
+		display: block;
+	}
+	.theme-switch {
+		position: fixed;
+		top: 1rem;
+		right: 1rem;
+		z-index: 20;
+	}
+</style>