diff options
Diffstat (limited to 'apps/kit/src/routes/book')
| -rw-r--r-- | apps/kit/src/routes/book/+layout.svelte | 17 | ||||
| -rw-r--r-- | apps/kit/src/routes/book/alerts/+page.svelte | 4 | ||||
| -rw-r--r-- | apps/kit/src/routes/book/buttons/+page.svelte | 24 |
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> |