Improve CodeGroup API

site/src/lib/ui/Code/CodeGroupHeader.svelte

@@ -1,12 +1,15 @@
 <script>
   import { merge } from "$lib/utils/class-merge";
+  import { getContext } from "svelte";
 
   /** @type {string | null}*/
   export let title = null;
 
-  /** @type {string[]}*/
-  export let tabs = [];
-  export let activeTab = 0;
+  /** @type {import("svelte/store").Writable<string[]>}*/
+  const tabs = getContext("code-group-tabs");
+
+  /** @type {import("svelte/store").Writable<number>}*/
+  const activeTab = getContext("code-group-active-tab");
 </script>
 
 <div
@@ -18,17 +21,17 @@
     </h3>
   {/if}
 
-  {#if tabs.length > 0}
+  {#if $tabs.length > 1}
     <div
       role="tablist"
       aria-orientation="horizontal"
       class="-mb-px flex gap-4 text-xs font-medium"
     >
-      {#each tabs as tab, i}
-        {@const active = i === activeTab}
+      {#each $tabs as tab, i}
+        {@const active = i === $activeTab}
         <button
           role="tab"
-          on:click={() => (activeTab = i)}
+          on:click={() => activeTab.set(i)}
           class={merge(
             "border-b py-3 transition ui-not-focus-visible:outline-none",
             active

site/src/lib/ui/Code/CodePanel.svelte

@@ -1,16 +1,29 @@
 <script>
+  import { getContext } from "svelte";
   import CodePanelBody from "./CodePanelBody.svelte";
   import CodePanelHeader from "./CodePanelHeader.svelte";
 
   /** @type {string|null}*/
   export let label = null;
   /** @type {string|null}*/
   export let tag = null;
+
+  export let name = "default";
+  /** @type {import("svelte/store").Writable<string[]>}*/
+  const tabs = getContext("code-group-tabs");
+  /** @type {import("svelte/store").Writable<number>}*/
+  const activeTab = getContext("code-group-active-tab");
+
+  tabs.update((oldTabs) => [...oldTabs, name]);
+
+  $: active = $tabs.findIndex((tab) => tab === name) === $activeTab;
 </script>
 
-<div class="group dark:bg-white/2.5">
-  {#if label || tag}
-    <CodePanelHeader {tag} {label} />
-  {/if}
-  <CodePanelBody><slot /></CodePanelBody>
-</div>
+{#if active}
+  <div class="group dark:bg-white/2.5">
+    {#if label || tag}
+      <CodePanelHeader {tag} {label} />
+    {/if}
+    <CodePanelBody><slot /></CodePanelBody>
+  </div>
+{/if}

site/src/lib/ui/CodeGroup.svelte

@@ -1,10 +1,20 @@
 <script>
+  import { setContext } from "svelte";
   import CodeGroupHeader from "./Code/CodeGroupHeader.svelte";
   import CodeTab from "./Code/CodePanel.svelte";
+  import { writable } from "svelte/store";
+
+  /** @type {import("svelte/store").Writable<string[]>}*/
+  let tabs = writable([]);
+  let activeTab = writable(0);
+
+  setContext("code-group-id", crypto.randomUUID());
+  setContext("code-group-tabs", tabs);
+  setContext("code-group-active-tab", activeTab);
 </script>
 
 <div
-  class="shadow-xl my-6 overflow-hidden rounded-md bg-zinc-900 dark:ring-1 dark:ring-white/10 not-prose"
+  class="shadow-md my-6 overflow-hidden rounded-md bg-zinc-900 dark:ring-1 dark:ring-white/10 not-prose"
 >
   <slot Header={CodeGroupHeader} Tab={CodeTab} />
 </div>

site/src/routes/[[locale=locale]]/+page.svelte

@@ -1,15 +1,12 @@
 <script>
   import CodeGroup from "$lib/ui/CodeGroup.svelte";
-  let activeTab = 0;
 </script>
 
 <CodeGroup let:Header let:Tab>
-  <Header title="Installation" tabs={["npm", "pnpm"]} bind:activeTab />
-  {#if activeTab === 0}
-    <Tab>npm install --save-dev t18s</Tab>
-  {:else if activeTab === 1}
-    <Tab>pnpm install --save-dev t18s</Tab>
-  {/if}
+  <Header title="Installation" />
+  <Tab name="npm">npm install --save-dev t18s</Tab>
+  <Tab name="yarn">yarn add --dev t18s</Tab>
+  <Tab name="pnpm">pnpm add --save-dev t18s</Tab>
 </CodeGroup>
 
 <CodeGroup let:Tab>

site/src/routes/[[locale=locale]]/syntax/+page.svelte

@@ -1,5 +1,6 @@
 <script>
   import Callout from "$lib/ui/Callout.svelte";
+  import CodeGroup from "$lib/ui/CodeGroup.svelte";
 </script>
 
 <h1>Syntax</h1>
@@ -13,6 +14,42 @@
 </p>
 
 <h2>Interpolating Values</h2>
+You can interpolate strings into your messages using curly braces. The value inside
+the braces will be replaced with the value of the variable with the same name.
+
+<CodeGroup let:Tab>
+  <Tab>Hello <mark class="text-orange-400 bg-transparent">{"{fullName}"}</mark>, how are you?</Tab>
+</CodeGroup>
+
+You can specify that a value is a number by adding a type-annotation in the curly braces.
+
+<CodeGroup let:Tab>
+  <Tab>There are {"{"}count<mark class="text-orange-400 bg-transparent">, number</mark>{"}"} people here</Tab>
+</CodeGroup>
+
+The same thing works for dates.
+
+<CodeGroup let:Tab>
+  <Tab>Today is {"{"}date<mark class="text-orange-400 bg-transparent">, date</mark>{"}"}</Tab>
+</CodeGroup>
+
+
+You can format the value by adding a third, format options in the curly braces. You can for example 
+specify how long the date should be.
+
+<CodeGroup let:Tab>
+  <Tab>Today is {"{data, date"}<mark class="text-orange-400 bg-transparent">, short</mark>{"}"}</Tab>
+</CodeGroup>
+
+These formatting options are locale aware and will do the right thing for the locale you are using. It uses
+the <code>Intl</code> API under the hood.
+
+Generally the format for interpolating values is always this.
+<ol>
+  <li>Variable name</li>
+  <li>Type</li>
+  <li>Options</li>
+</ol>
 
 <h2>Plurals</h2>