feat(bridge-ui): Tabs Component

packages/bridge-ui/src/components/Tabs/Tab.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { link } from 'svelte-spa-router';
+  import { getContext } from 'svelte';
+  import type { Writable } from 'svelte/store';
+
+  export let href: string = '';
+  export let name: string = '';
+
+  const activeTab = getContext<Writable<string>>('activeTab');
+
+  $: selected = name === $activeTab;
+  $: tabActiveCls = selected ? 'tab-active' : '';
+</script>
+
+<a
+  role="tab"
+  aria-selected={selected}
+  class="tab tab-bordered {tabActiveCls}"
+  on:click={() => ($activeTab = name)}
+  {href}
+  use:link>
+  <slot />
+</a>

packages/bridge-ui/src/components/Tabs/TabList.svelte

@@ -0,0 +1,3 @@
+<div role="tablist" class="tabs {$$restProps.class || ''}">
+  <slot />
+</div>

packages/bridge-ui/src/components/Tabs/TabPanel.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import type { Writable } from 'svelte/store';
+
+  export let tab: string = '';
+
+  const activeTab = getContext<Writable<string>>('activeTab');
+
+  $: selected = tab === $activeTab;
+  $: classes = `${$$restProps.class || ''} ${!selected ? 'hidden' : ''}`;
+</script>
+
+<div role="tabpanel" aria-expanded={selected} class={classes}>
+  <slot />
+</div>

packages/bridge-ui/src/components/Tabs/Tabs.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { writable } from 'svelte/store';
+  import { setContext } from 'svelte';
+
+  export let activeTab = '';
+
+  // State only available to the component and its descendants
+  setContext('activeTab', writable(activeTab));
+</script>
+
+<div class={$$restProps.class} style={$$restProps.style}>
+  <slot />
+</div>

packages/bridge-ui/src/components/Tabs/index.ts

@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.svelte';
+export { default as TabList } from './TabList.svelte';
+export { default as Tab } from './Tab.svelte';
+export { default as TabPanel } from './TabPanel.svelte';

packages/bridge-ui/src/pages/home/Home.svelte

@@ -1,17 +1,21 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n';
-  import { link, location } from 'svelte-spa-router';
+  import { location } from 'svelte-spa-router';
   import { transactions } from '../../store/transactions';
   import BridgeForm from '../../components/form/BridgeForm.svelte';
   import TaikoBanner from '../../components/TaikoBanner.svelte';
   import Transactions from '../../components/Transactions.svelte';
+  import { Tabs, TabList, Tab, TabPanel } from '../../components/Tabs';
 
   let bridgeWidth: number;
   let bridgeHeight: number;
 
   $: activeTab = $location.replace('/', '').startsWith('transactions')
     ? 'transactions'
     : 'bridge';
+
+  // TODO: do we really need all these tricks to style containers
+  //       Rethink this part: fluid, fixing on small screens
   $: isBridge = activeTab === 'bridge';
   $: styleContainer = isBridge ? '' : `min-width: ${bridgeWidth}px;`;
   $: fitClassContainer = isBridge ? 'max-w-fit' : 'w-fit';
@@ -26,34 +30,26 @@
   style={styleContainer}
   bind:clientWidth={bridgeWidth}
   bind:clientHeight={bridgeHeight}>
-  <div
+  <Tabs
     class="rounded-3xl border-2 border-bridge-form border-solid p-2 md:p-6"
-    style={styleInner}>
-    <!-- TODO: extract this tab component into a general one? -->
-    <div class="tabs block mb-4">
-      <a
-        class="tab tab-bordered {isBridge ? 'tab-active' : ''}"
-        href="/"
-        use:link>Bridge</a>
-      <a
-        class="tab tab-bordered {!isBridge ? 'tab-active' : ''}"
-        href="/transactions"
-        use:link>Transactions ({$transactions.length})</a>
-    </div>
+    style={styleInner}
+    bind:activeTab>
+    <TabList class="block mb-4">
+      <Tab name="bridge" href="/">Bridge</Tab>
+      <Tab name="transactions" href="/transactions">
+        Transactions ({$transactions.length})
+      </Tab>
+    </TabList>
 
-    {#if activeTab === 'bridge'}
+    <TabPanel tab="bridge">
       <TaikoBanner />
       <div class="px-4">
         <BridgeForm />
       </div>
-    {:else}
+    </TabPanel>
+
+    <TabPanel tab="transactions">
       <Transactions />
-    {/if}
-  </div>
+    </TabPanel>
+  </Tabs>
 </div>
-
-<style>
-  .tabs {
-    display: block;
-  }
-</style>