From 82039d8843dd4bae05527aa354d289625f7da4e4 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 9 Jan 2020 09:49:35 -0800
Subject: [PATCH] feat(palimpsest): add ComponentLayout

---
 .../src/components/ComponentLayout.svelte     | 49 +++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 palimpsest/src/components/ComponentLayout.svelte

diff --git a/palimpsest/src/components/ComponentLayout.svelte b/palimpsest/src/components/ComponentLayout.svelte
new file mode 100644
index 00000000..8ae8868e
--- /dev/null
+++ b/palimpsest/src/components/ComponentLayout.svelte
@@ -0,0 +1,49 @@
+<script>
+  export let params = {};
+
+  import { Tabs, Tab } from 'carbon-components-svelte';
+  import CodeSnippet from './carbon-components/CodeSnippet.svelte';
+
+  const registry = {
+    CodeSnippet
+  };
+
+  let selected = 0;
+</script>
+
+<style>
+  main {
+    margin-top: 2.5rem;
+    padding-top: 3rem;
+  }
+
+  header {
+    border-bottom: 1px solid var(--cds-ui-03);
+  }
+
+  h1 {
+    margin-bottom: 1.5rem;
+  }
+
+  .bx--grid {
+    padding-left: 16rem;
+  }
+</style>
+
+<main>
+  <div class="bx--grid">
+    <header class="bx--row">
+      <div class="bx--col">
+        <h1>{params.name}</h1>
+      </div>
+      <Tabs type="container" bind:selected>
+        <Tab label="Overview" />
+        <Tab label="API" />
+        <Tab label="Kitchen Sink" />
+      </Tabs>
+    </header>
+  </div>
+  <section class="bx--grid">
+    <svelte:component this={registry[params.name]} {selected} />
+  </section>
+</main>