docs: move new example to demo page

Author: hperrin

packages/site/src/routes/demo/tabs/_Simple.svelte

@@ -9,20 +9,41 @@
     </Tab>
   </TabBar>
 
+  {#if active === 'Home'}
+    <Paper variant="unelevated">
+      <Content>Welcome to the Home page! I hope you like SMUI!</Content>
+    </Paper>
+  {:else if active === 'Merchandise'}
+    <Paper variant="unelevated">
+      <Content>
+        You want merch? We got so much cool merch! We got SMUI toilet paper,
+        SMUI ironing boards, SMUI gas pedals! Come and get 'em!
+      </Content>
+    </Paper>
+  {:else if active === 'About Us'}
+    <Paper variant="unelevated">
+      <Content>
+        We are a boutique UI library, ready to get you up and running on
+        whatever your project is. Whether you're building a web UI for an
+        automated toaster or a web UI for an automated coffee maker, SMUI is
+        ready for you!
+      </Content>
+    </Paper>
+  {/if}
+
   <div style="margin-top: 1em;">
     <div>Programmatically select:</div>
     {#each ['Home', 'Merchandise', 'About Us'] as tab}
       <Button on:click={() => (active = tab)}><Label>{tab}</Label></Button>
     {/each}
   </div>
-
-  <pre class="status">Selected: {active}</pre>
 </div>
 
 <script lang="ts">
   import Tab, { Label } from '@smui/tab';
   import TabBar from '@smui/tab-bar';
   import Button from '@smui/button';
+  import Paper, { Content } from '@smui/paper';
 
   let active = 'Home';
 </script>

packages/tab/README.md

@@ -12,52 +12,6 @@ npm install --save-dev @smui/tab
 
 https://sveltematerialui.com/demo/tabs
 
-[See it in action.](https://sveltematerialui.com/demo/tabs)
-
-[See the demo code.](/site/src/routes/demo/tabs/)
-
-# Basic Usage
-
-Use if/else conditional constructs to display tab content, eg:
-
-```javascript
-<script>
- import TabBar from '@smui/tab-bar';
- import Tab from '@smui/tab';
- import Paper, { Subtitle } from '@smui/paper';
- let active = 'Home';
-</script>
-<TabBar tabs={['Home', 'Merchandise', 'About Us']} let:tab bind:active>
-    <!-- Note: the `tab` property is required! -->
-    <Tab {tab} tabIndicator$transition="fade">
-      <Label>{tab}</Label>
-    </Tab>
-  </TabBar>
-{#if active ==="Home"}
-	<Paper class="paper-demo">
-		<Title>Paper</Title>
-		<Subtitle>This is a sheet of paper.</Subtitle>
-		<Content>Home Content.</Content>
-	</Paper>
-{:else if active ==="Merchandise"}
-	<Paper class="paper-demo">
-		<Title>Paper</Title>
-		<Subtitle>This is a sheet of paper.</Subtitle>
-		<Content>Merchandise content.</Content>
-	</Paper>
- {:else if active ==="About Us"}
-	<Paper class="paper-demo">
-		<Title>Paper</Title>
-		<Subtitle>This is a sheet of paper.</Subtitle>
-		<Content>About Content.</Content>
-	</Paper>
-{/if}
-```
-
-# Exports
-
-todo...
-
 # More Information
 
 See [Tabs](https://material.io/components/tabs) in the Material design spec.