Update docs examples + Add Select component + Add Card, Base, Title classes

src/routes/_internal/components/Example.svelte

@@ -1,18 +1,26 @@
 <script lang="ts">
-    import Prism from 'prismjs';
-    import 'prism-svelte';
+    import Button from '$lib/components/Button.svelte'
+    import IconMoon from 'virtual:icons/heroicons-outline/moon'
+    import IconSun from 'virtual:icons/heroicons-outline/sun'
 
-    export let background: 'var(--color-raised-bg)' | 'transparent' = 'var(--color-raised-bg)'
-
-    export let code = ''
-    const highlighted = Prism.highlight(code.trim(), Prism.languages.svelte, 'svelte');
+    let theme = 'light'
+    let background: 'var(--color-raised-bg)' | 'var(--color-bg)' = 'var(--color-bg)'
 </script>
 
-<div class="example theme-light">
-    <div class="example__preview" style:background={background}>
-        <slot />
+<div class="example">
+    <div class="example__preview theme-{theme} base" style:background={background}>
+        <div class="example__preview__options">
+            <Button color="primary-light" on:click={() => theme === 'light' ? theme = 'dark' : theme = 'light'}>
+                {#if theme === 'light'}
+                    <IconMoon/>
+                {:else}
+                    <IconSun/>
+                {/if}
+            </Button>
+        </div>
+        <slot name="example"/>
     </div>
-    <pre class="example__code language-">{@html highlighted}</pre>
+    <pre class="example__code language-svelte"><slot name="code"/></pre>
 </div>
 
 <style lang="postcss">
@@ -20,13 +28,24 @@
         margin-bottom: 32px;
 
         &__preview {
-            padding: 16px;
             border-radius: var(--rounded-sm-top);
             border: solid 2px hsl(0, 0%, 20%);
             border-bottom: none;
             display: flex;
             grid-gap: 16px;
             flex-wrap: wrap;
+            position: relative;
+            justify-content: flex-start;
+
+            &__options {
+                position: absolute;
+                top: 0;
+                right: 0;
+                padding: 8px;
+                display: flex;
+                justify-content: flex-end;
+                z-index: 100;
+            }
         }
 
         &__code {

src/routes/_internal/components/Header.svelte

@@ -8,7 +8,7 @@
 
     onMount(() => {
         let lastScrollTop: number
-        window.addEventListener('scroll', function () {
+        window.addEventListener('scroll', () => {
             let scrollTop = window.pageYOffset || document.documentElement.scrollTop
             if (scrollTop > lastScrollTop && headerElement) {
                 headerElement.style.top = 'calc(var(--header-height) * -1)'

src/routes/_internal/components/Sidebar.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">
-    const components = ['Button', 'Pagination', 'Link', 'NavRow', 'Badge', 'Avatar', 'Chips'].sort()
+    const components = Object.keys(import.meta.glob('../../components/**'))
+        .map(it => it.replace('../../components/', '').replace('.md', ''))
+        .sort();
+
+    const classes = Object.keys(import.meta.glob('../../classes/**'))
+        .map(it => it.replace('../../classes/', '').replace('.md', ''))
+        .sort();
 </script>
 
 <nav class="sidebar">
@@ -7,7 +13,8 @@
         <span class="section__title">Getting started</span>
         <a href="/" class="section__link">Introduction</a>
         <a href="/getting-started/icons" class="section__link">Using Icons</a>
-        <a href="/getting-started/css" class="section__link">CSS configuration</a>
+        <a href="/getting-started/postcss" class="section__link">PostCSS config</a>
+        <a href="/getting-started/css" class="section__link">Writing CSS</a>
     </div>
 
     <div class="section">
@@ -16,6 +23,13 @@
             <a href="/components/{component}" class="section__link">{component}</a>
         {/each}
     </div>
+
+    <div class="section">
+        <span class="section__title">Classes</span>
+        {#each classes as page}
+            <a href="/classes/{page}" class="section__link">{page}</a>
+        {/each}
+    </div>
 </nav>
 
 <style lang="postcss">
@@ -25,7 +39,7 @@
         grid-gap: 2rem;
         background-color: hsl(220, 15%, 40%);
         color: hsl(216, 10%, 80%);
-        padding: 5.5rem 1.5rem 1.5rem;
+        padding: 5.5rem 2rem 2rem;
         height: 100vh;
         width: calc(var(--sidebar-width) - 3rem);
         position: fixed;