Update style vars + Add examples to docs + Add Avatar, NavRow, Pagination, & Link

src/routes/components/Avatar.md

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import Avatar from "$lib/components/Avatar.svelte";
+    import Example from "../_internal/components/Example.svelte"
+</script>
+
+<Example code={`<Avatar src="https://avatars3.githubusercontent.com/u/44736536?v=4" size="lg" circle />
+<Avatar src="https://cdn.modrinth.com/data/AANobbMI/icon.png" size="md" />
+<Avatar size="sm" />
+<Avatar src="https://avatars1.githubusercontent.com/u/6166773?v=4" size="xs" circle />`}>
+<Avatar src="https://avatars3.githubusercontent.com/u/44736536?v=4" size="lg" circle />
+<Avatar src="https://cdn.modrinth.com/data/AANobbMI/icon.png" size="md" />
+<Avatar size="sm" />
+<Avatar src="https://avatars1.githubusercontent.com/u/6166773?v=4" size="xs" circle />
+</Example>

src/routes/components/Badge.md

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import Badge from "$lib/components/Badge.svelte";
+    import Example from "../_internal/components/Example.svelte"
+</script>
+
+<Example code={`<Badge color="red" label="Tomato" />
+<Badge color="yellow" label="Squash" />
+<Badge color="green" label="Lettuce" />
+<Badge label="Onion" />`}>
+<Badge color="red" label="Tomato" />
+<Badge color="yellow" label="Squash" />
+<Badge color="green" label="Lettuce" />
+<Badge label="Onion" />
+</Example>

src/routes/components/Button.md

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import Button from "$lib/components/Button.svelte";
+    import Example from "../_internal/components/Example.svelte"
+</script>
+
+<Example code={`<Button>Eat cake</Button>
+<Button size="sm" color="primary">Small piece</Button>
+<Button size="lg" color="danger">Big part</Button>
+<Button disabled>Nice try</Button>`}>
+<Button>Eat cake</Button>
+<Button size="sm" color="primary">Small piece</Button>
+<Button size="lg" color="danger">Big part</Button>
+<Button disabled>Nice try</Button>
+</Example>

src/routes/components/Link.md

@@ -0,0 +1,8 @@
+<script lang="ts">
+    import Link from "$lib/components/Link.svelte";
+    import Example from "../_internal/components/Example.svelte"
+</script>
+
+<Example code={`<Link href="#clicked">Click for fun</Link>`}>
+<Link href="#clicked">Click for fun</Link>
+</Example>

src/routes/components/NavRow.md

@@ -0,0 +1,46 @@
+<script lang="ts">
+    import NavRow from "$lib/components/NavRow.svelte";
+    import Example from "../_internal/components/Example.svelte"
+</script>
+
+`NavRow` works well for most horizontal navigation with less than 10 items. It can be used with paths & query params, and supports specific path level (depths).
+
+<Example code={`
+<NavRow
+    level={1}
+    links={[
+        {
+            href: '/Button',
+            label: 'Button'
+        },
+        {
+            href: '/Link',
+            label: 'Link'
+        },
+        {
+            href: '/NavRow',
+            label: 'NavRow'
+        }
+    ]}>
+    Click for fun
+</NavRow>
+`}>
+<NavRow
+level={1}
+links={[
+{
+href: '/Button',
+label: 'Button'
+},
+{
+href: '/Link',
+label: 'Link'
+},
+{
+href: '/NavRow',
+label: 'NavRow'
+}
+]}>
+Click for fun
+</NavRow>
+</Example>

src/routes/components/Pagination.md

@@ -1,12 +1,10 @@
----
-title: Pagination
-component: Pagination
----
-
 <script lang="ts">
     import Pagination from "$lib/components/Pagination.svelte"
+    import Example from "../_internal/components/Example.svelte"
 </script>
 
 Use pagination to show a set of page numbers and navigation directions to move through paginated data.
 
-<Pagination page={20} count={50} />
+<Example code={`<Pagination page={20} count={50} />`} background="transparent">
+    <Pagination page={20} count={50} />
+</Example>

src/routes/components/button.md

@@ -1,14 +0,0 @@
----
-title: Button
-component: Button
----
-
-<script lang="ts">
-    import Button from "$lib/components/Button.svelte";
-</script>
-
-<Button>Eat cake</Button>
-
-<Button size="sm" color="primary">Small piece</Button>
-
-<Button size="lg" color="danger">Big part</Button>

src/routes/components/link.md

@@ -1,10 +0,0 @@
----
-title: Link
-component: Link
----
-
-<script lang="ts">
-    import Link from "$lib/components/Link.svelte";
-</script>
-
-<Link href="#clicked">Click for fun</Link>