docs: add new component docs

docs/src/layouts/ComponentLayout.svelte

@@ -0,0 +1,133 @@
+<script>
+  import {
+    Grid,
+    Row,
+    Column,
+    Content,
+    Button,
+    Select,
+    SelectItem,
+  } from "carbon-components-svelte";
+  import Code16 from "carbon-icons-svelte/lib/Code16";
+  import { page, metatags } from "@sveltech/routify";
+  import { theme } from "../store";
+
+  export let component = $page.title;
+  export let source = "";
+
+  metatags.title = $page.title;
+
+  // TODO: [refactor] read from package.json value
+  $: sourceCode = `https://github.com/IBM/carbon-components-svelte/tree/master/src/${
+    source || `${$page.title}/${$page.title}.svelte`
+  }`;
+</script>
+
+<style global>
+  #select-theme {
+    width: auto;
+  }
+
+  .prose > p > .bx--link {
+    font-size: inherit;
+  }
+
+  .prose .toc {
+    margin-bottom: var(--cds-layout-01);
+  }
+
+  .table {
+    position: sticky;
+    max-height: calc(100vh - 3rem);
+    top: 3rem;
+    padding-top: var(--cds-spacing-05);
+    padding-bottom: var(--cds-spacing-05);
+    padding-left: var(--cds-spacing-08);
+    overflow-y: auto;
+  }
+
+  .bar {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: var(--cds-layout-02);
+    border-bottom: 1px solid var(--cds-ui-03);
+  }
+
+  [data-components] {
+    z-index: 2;
+    position: relative;
+    display: flex;
+  }
+
+  [data-components] .bx--grid {
+    width: 100%;
+  }
+
+  .toc h5 {
+    margin-bottom: var(--cds-spacing-03);
+  }
+
+  .toc.mobile {
+    display: none;
+  }
+
+  @media (max-width: 1056px) {
+    .table {
+      display: none;
+    }
+
+    .toc.mobile {
+      display: block;
+    }
+  }
+</style>
+
+<Content data-components>
+  <Grid>
+    <Row>
+      <Column>
+        <h1>{component}</h1>
+        <div class="bar">
+          <Select
+            id="select-theme"
+            inline
+            labelText="Theme"
+            bind:selected="{$theme}"
+          >
+            <SelectItem value="white" text="White" />
+            <SelectItem value="g10" text="Gray 10" />
+            <SelectItem value="g90" text="Gray 90" />
+            <SelectItem value="g100" text="Gray 100" />
+          </Select>
+          <Button
+            kind="ghost"
+            target="_blank"
+            size="field"
+            href="{sourceCode}"
+            icon="{Code16}"
+          >
+            Source code
+          </Button>
+        </div>
+      </Column>
+    </Row>
+
+    <Row>
+      <Column class="prose">
+        <div class="toc mobile">
+          <h5>Table of Contents</h5>
+          <slot name="aside" />
+        </div>
+        <h2 id="usage">Usage</h2>
+        <slot />
+      </Column>
+    </Row>
+  </Grid>
+
+  <Column class="table" xlg="{4}" lg="{5}">
+    <div class="toc">
+      <h5>Table of Contents</h5>
+      <slot name="aside" />
+    </div>
+  </Column>
+</Content>