3 files changed, 88 insertions, 0 deletions
diff --git a/apps/kit/src/routes/book/+layout.svelte b/apps/kit/src/routes/book/+layout.svelte
new file mode 100644
index 0000000..0fcbd51
--- /dev/null
+++ b/apps/kit/src/routes/book/+layout.svelte
@@ -0,0 +1,26 @@
+<script>
+</script>
+
+<div id="wrapper">
+    <nav>
+        <a href="/book/alerts" class="link">Alerts</a>
+    </nav>
+    <main>
+        <slot />
+    </main>
+</div>
+
+<style>
+    #wrapper {
+        display: flex;
+        flex-direction: row;
+    }
+    nav {
+        min-width: 280px;
+        padding: 10px;
+    }
+    main {
+        width: 100%;
+        padding: 5px;
+    }
+</style>
diff --git a/apps/kit/src/routes/book/+page.svelte b/apps/kit/src/routes/book/+page.svelte
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/apps/kit/src/routes/book/+page.svelte
diff --git a/apps/kit/src/routes/book/alerts/+page.svelte b/apps/kit/src/routes/book/alerts/+page.svelte
new file mode 100644
index 0000000..93b4850
--- /dev/null
+++ b/apps/kit/src/routes/book/alerts/+page.svelte
@@ -0,0 +1,62 @@
+<script>
+    import Alert from "$lib/components/alert.svelte";
+</script>
+
+<h1>Alerts</h1>
+<section>
+    <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" />
+</section>
+<section>
+    <h2>Error</h2>
+    <Alert type="error" message="This is message" title="This is title" />
+</section>
+<section>
+    <h2>Success</h2>
+    <Alert type="success" message="This is message" title="This is title" />
+</section>
+<section>
+    <h2>Actions</h2>
+    <Alert
+        type="info"
+        message="This is message"
+        title="This is title"
+        actions={[
+            {
+                id: "confirm",
+                text: "Yes!",
+                color: "green",
+            },
+            {
+                id: "cancel",
+                text: "No!",
+                color: "red",
+            },
+        ]}
+    />
+</section>
+<section>
+    <h2>Right link</h2>
+    <Alert
+        on:rightLinkCliked={() => alert("Right link clicked")}
+        rightLinkText="Link or action"
+        type="info"
+    />
+</section>
+<section>
+    <h2>List</h2>
+    <Alert
+        title="This is title"
+        listItems={["Message 1", "Message 2"]}
+        type="info"
+    />
+</section>
+<section>
+    <h2>Closeable</h2>
+    <Alert message="This is message" closeable type="info" />
+</section>