refactor: Change file structure

6 files changed, 233 insertions, 0 deletions

diff --git a/code/app/src/routes/book/+layout.svelte b/code/app/src/routes/book/+layout.svelte
new file mode 100644
index 0000000..aeed0d4
--- /dev/null
+++ b/code/app/src/routes/book/+layout.svelte
@@ -0,0 +1,64 @@
+<script>
+    import { page } from "$app/stores";
+    import "../../app.pcss";
+</script>
+
+<div id="wrapper">
+    <nav>
+        <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/buttons")}
+            >Buttons</a
+        >
+        <a
+            href="/book/toggles"
+            class="link"
+            class:active={$page.url.pathname.startsWith("/book/toggles")}
+            >Toggles</a
+        >
+        <a
+            href="/book/inputs"
+            class="link"
+            class:active={$page.url.pathname.startsWith("/book/inputs")}
+            >Inputs</a
+        >
+    </nav>
+    <main>
+        <slot />
+    </main>
+</div>
+
+<style global lang="postcss">
+    #wrapper {
+        display: flex;
+        flex-direction: row;
+    }
+    nav {
+        min-width: 120px;
+        padding: 10px;
+        display: flex;
+        flex-direction: column;
+        position: sticky;
+        position: -webkit-sticky;
+        top: 0;
+        height: fit-content;
+    }
+    main {
+        width: 100%;
+        padding: 10px;
+    }
+    section {
+        margin-bottom: 25px;
+
+        h2 {
+            margin-bottom: 5px;
+        }
+    }
+</style>
diff --git a/code/app/src/routes/book/+page.svelte b/code/app/src/routes/book/+page.svelte
new file mode 100644
index 0000000..635b3c2
--- /dev/null
+++ b/code/app/src/routes/book/+page.svelte
@@ -0,0 +1 @@
+<p>A showcase of greatoffices components</p>
diff --git a/code/app/src/routes/book/alerts/+page.svelte b/code/app/src/routes/book/alerts/+page.svelte
new file mode 100644
index 0000000..d008d85
--- /dev/null
+++ b/code/app/src/routes/book/alerts/+page.svelte
@@ -0,0 +1,70 @@
+<script>
+    import Alert from "$lib/components/alert.svelte";
+</script>
+
+<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"
+        closeable
+        actions={[
+            {
+                id: "confirm",
+                text: "Yes!",
+            },
+            {
+                id: "cancel",
+                text: "No!",
+                color: "red",
+            },
+        ]}
+    />
+</section>
+<section>
+    <h2>Right link</h2>
+    <Alert
+        on:rightLinkCliked={() => alert("Right link clicked")}
+        rightLinkText="Link or action"
+        title="Go here"
+        message="Hehe"
+        type="error"
+    />
+</section>
+<section>
+    <h2>List</h2>
+    <Alert
+        title="This is title"
+        listItems={["Message 1", "Message 2"]}
+        type="error"
+        message="This is bad dude"
+        closeable
+        closeableCooldown="60"
+        id="alert-1"
+        on:actrepeat={() => {
+            alert("Repeat requested");
+        }}
+        actions={[{ id: "repeat", text: "Try again" }]}
+    />
+</section>
+<section>
+    <h2>Closeable</h2>
+    <Alert message="This is message" closeable type="info" />
+</section>
diff --git a/code/app/src/routes/book/buttons/+page.svelte b/code/app/src/routes/book/buttons/+page.svelte
new file mode 100644
index 0000000..19ba163
--- /dev/null
+++ b/code/app/src/routes/book/buttons/+page.svelte
@@ -0,0 +1,23 @@
+<script>
+    import Button from "$lib/components/button.svelte";
+</script>
+
+<section>
+    <h2>Primary</h2>
+    <Button kind="primary" text="Small" size="sm" />
+    <Button kind="primary" text="Medium/Default" />
+    <Button kind="primary" text="Large" size="lg" />
+    <Button kind="primary" text="Extra large" size="xl" />
+</section>
+<section>
+    <h2>Secondary</h2>
+    <Button kind="secondary" text="Click me!" />
+</section>
+<section>
+    <h2>White</h2>
+    <Button kind="white" text="Click me!" />
+</section>
+<section>
+    <h2>Loading</h2>
+    <Button kind="primary" loading={true} text="Wait" />
+</section>
diff --git a/code/app/src/routes/book/inputs/+page.svelte b/code/app/src/routes/book/inputs/+page.svelte
new file mode 100644
index 0000000..a693f69
--- /dev/null
+++ b/code/app/src/routes/book/inputs/+page.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+    import Input from "$lib/components/input.svelte";
+    import { DatabaseIcon } from "$lib/components/icons";
+</script>
+
+<section>
+    <h2>Default</h2>
+    <Input label="Input me" placeholder="Hello" />
+</section>
+
+<section>
+    <h2>With icon</h2>
+    <Input label="Input me" placeholder="Hello" icon={DatabaseIcon} />
+</section>
+
+<section>
+    <h2>With corner hint</h2>
+    <Input label="Input me ->" placeholder="Hello" cornerHint="Hint hint" />
+</section>
+
+<section>
+    <h2>Disabled</h2>
+    <Input label="No" placeholder="Sorry" disabled />
+</section>
+
+<section>
+    <h2>Errored</h2>
+    <Input
+        label="No"
+        placeholder="Sorry"
+        errorText="That's not right"
+        icon={DatabaseIcon}
+    />
+</section>
+
+<section>
+    <h2>Help</h2>
+    <Input label="Go ahead" placeholder="Write here" helpText="Write above" />
+</section>
+<section>
+    <h2>Addon</h2>
+    <Input
+        label="Go ahead"
+        placeholder="Write here"
+        helpText="Write above"
+        addon="To the right"
+    />
+</section>
diff --git a/code/app/src/routes/book/toggles/+page.svelte b/code/app/src/routes/book/toggles/+page.svelte
new file mode 100644
index 0000000..94228b4
--- /dev/null
+++ b/code/app/src/routes/book/toggles/+page.svelte
@@ -0,0 +1,27 @@
+<script>
+    import Switch from "$lib/components/switch.svelte";
+</script>
+
+<section>
+    <h2>Default</h2>
+    <Switch />
+</section>
+<section>
+    <h2>Short</h2>
+    <Switch type="short" />
+</section>
+<section>
+    <h2>Icon</h2>
+    <Switch type="icon" />
+</section>
+<section>
+    <h2>Label / Description</h2>
+    <div class="max-w-md">
+        <Switch label="Label" description="Some text" />
+    </div>
+</section>
+
+<section>
+    <h2>Label / Description (right aligned)</h2>
+        <Switch label="Label" description="Some text" rightAlignedLabelDescription />
+</section>
\ No newline at end of file