feat: Move frontend into layout group (main)

This enables /book to load without the usual layout (app layout)

3 files changed, 40 insertions, 5 deletions

diff --git a/apps/kit/src/routes/book/+layout.svelte b/apps/kit/src/routes/book/+layout.svelte
index 0fcbd51..85ba907 100644
--- a/apps/kit/src/routes/book/+layout.svelte
+++ b/apps/kit/src/routes/book/+layout.svelte
@@ -1,9 +1,22 @@
 <script>
+    import { page } from "$app/stores";
+    import "../../app.pcss";
 </script>
 
 <div id="wrapper">
-    <nav>
-        <a href="/book/alerts" class="link">Alerts</a>
+    <nav class="flex flex-col">
+        <a
+            href="/book/alerts"
+            class="link"
+            class:active={$page.url.pathname.startsWith("/book/alerts")}
+            >Alerts</a
+        >
+        <a
+            href="/book/buttons"
+            class="link"
+            class:active={$page.url.pathname.startsWith("/book/alerts")}
+            >Buttons</a
+        >
     </nav>
     <main>
         <slot />
diff --git a/apps/kit/src/routes/book/alerts/+page.svelte b/apps/kit/src/routes/book/alerts/+page.svelte
index 566ccca..15084ca 100644
--- a/apps/kit/src/routes/book/alerts/+page.svelte
+++ b/apps/kit/src/routes/book/alerts/+page.svelte
@@ -7,7 +7,6 @@
     <h2>Info</h2>
     <Alert type="info" message="This is message" title="This is title" />
 </section>
-
 <section>
     <h2>Warning</h2>
     <Alert type="warning" message="This is message" title="This is title" />
@@ -31,7 +30,6 @@
             {
                 id: "confirm",
                 text: "Yes!",
-                color: "green",
             },
             {
                 id: "cancel",
@@ -48,7 +46,7 @@
         rightLinkText="Link or action"
         title="Go here"
         message="Hehe"
-        type="info"
+        type="error"
     />
 </section>
 <section>
diff --git a/apps/kit/src/routes/book/buttons/+page.svelte b/apps/kit/src/routes/book/buttons/+page.svelte
new file mode 100644
index 0000000..c8e8c93
--- /dev/null
+++ b/apps/kit/src/routes/book/buttons/+page.svelte
@@ -0,0 +1,24 @@
+<script>
+    import Button from "$lib/components/button.svelte";
+</script>
+
+<h1>Buttons</h1>
+<section>
+    <h2>Primary</h2>
+    <div class="">
+        <Button kind="primary" text="Normal" />
+        <Button kind="primary" text="Large" size="lg" />
+        <Button kind="primary" text="Medium" size="md" />
+        <Button kind="primary" text="Small" size="sm" />
+        <Button kind="primary" text="Extra large" size="xl" />
+        <Button kind="primary" text="Extra small" size="xs" />
+    </div>
+</section>
+<section>
+    <h2>Secondary</h2>
+    <Button kind="secondary" text="Click me!" />
+</section>
+<section>
+    <h2>White</h2>
+    <Button kind="white" text="Click me!" />
+</section>