From a046fa3907efa85482bd9bce60de44ea2253be55 Mon Sep 17 00:00:00 2001
From: Francisco Ramos <jscriptcoder@gmail.com>
Date: Wed, 22 Mar 2023 09:06:45 +0100
Subject: [PATCH] feat(bridge-ui): Tabs Component (#13380)

---
 packages/bridge-ui/src/App.svelte             |  1 +
 .../bridge-ui/src/components/Tabs/Tab.svelte  | 24 +++++++
 .../src/components/Tabs/TabList.svelte        |  3 +
 .../src/components/Tabs/TabPanel.svelte       | 16 +++++
 .../bridge-ui/src/components/Tabs/Tabs.svelte | 17 +++++
 .../bridge-ui/src/components/Tabs/index.ts    |  4 ++
 packages/bridge-ui/src/pages/home/Home.svelte | 65 ++++++++++---------
 7 files changed, 101 insertions(+), 29 deletions(-)
 create mode 100644 packages/bridge-ui/src/components/Tabs/Tab.svelte
 create mode 100644 packages/bridge-ui/src/components/Tabs/TabList.svelte
 create mode 100644 packages/bridge-ui/src/components/Tabs/TabPanel.svelte
 create mode 100644 packages/bridge-ui/src/components/Tabs/Tabs.svelte
 create mode 100644 packages/bridge-ui/src/components/Tabs/index.ts

diff --git a/packages/bridge-ui/src/App.svelte b/packages/bridge-ui/src/App.svelte
index efcacff5f57..f2abd6c37fa 100644
--- a/packages/bridge-ui/src/App.svelte
+++ b/packages/bridge-ui/src/App.svelte
@@ -242,6 +242,7 @@
     pausable: false,
   };
 
+  // TODO: Not found route
   const routes = {
     '/:tab?': wrap({
       component: Home,
diff --git a/packages/bridge-ui/src/components/Tabs/Tab.svelte b/packages/bridge-ui/src/components/Tabs/Tab.svelte
new file mode 100644
index 00000000000..341cbd1abd6
--- /dev/null
+++ b/packages/bridge-ui/src/components/Tabs/Tab.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { link } from 'svelte-spa-router';
+  import { getContext } from 'svelte';
+  import type { Writable } from 'svelte/store';
+  import { key } from './Tabs.svelte';
+
+  export let href: string = '';
+  export let name: string = '';
+
+  const activeTab = getContext<Writable<string>>(key);
+
+  $: 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>
diff --git a/packages/bridge-ui/src/components/Tabs/TabList.svelte b/packages/bridge-ui/src/components/Tabs/TabList.svelte
new file mode 100644
index 00000000000..f4ee3e9e0c9
--- /dev/null
+++ b/packages/bridge-ui/src/components/Tabs/TabList.svelte
@@ -0,0 +1,3 @@
+<div role="tablist" class="tabs {$$restProps.class || ''}">
+  <slot />
+</div>
diff --git a/packages/bridge-ui/src/components/Tabs/TabPanel.svelte b/packages/bridge-ui/src/components/Tabs/TabPanel.svelte
new file mode 100644
index 00000000000..64d24625ffb
--- /dev/null
+++ b/packages/bridge-ui/src/components/Tabs/TabPanel.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import type { Writable } from 'svelte/store';
+  import { key } from './Tabs.svelte';
+
+  export let tab: string = '';
+
+  const activeTab = getContext<Writable<string>>(key);
+
+  $: selected = tab === $activeTab;
+  $: classes = `${$$restProps.class || ''} ${!selected ? 'hidden' : ''}`;
+</script>
+
+<div role="tabpanel" aria-expanded={selected} class={classes}>
+  <slot />
+</div>
diff --git a/packages/bridge-ui/src/components/Tabs/Tabs.svelte b/packages/bridge-ui/src/components/Tabs/Tabs.svelte
new file mode 100644
index 00000000000..62d494e78d0
--- /dev/null
+++ b/packages/bridge-ui/src/components/Tabs/Tabs.svelte
@@ -0,0 +1,17 @@
+<script lang="ts" context="module">
+  export const key = Symbol();
+</script>
+
+<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(key, writable(activeTab));
+</script>
+
+<div class={$$restProps.class} style={$$restProps.style}>
+  <slot />
+</div>
diff --git a/packages/bridge-ui/src/components/Tabs/index.ts b/packages/bridge-ui/src/components/Tabs/index.ts
new file mode 100644
index 00000000000..bf3b89282c0
--- /dev/null
+++ b/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';
diff --git a/packages/bridge-ui/src/pages/home/Home.svelte b/packages/bridge-ui/src/pages/home/Home.svelte
index f6296d722b2..b4d1903f9d3 100644
--- a/packages/bridge-ui/src/pages/home/Home.svelte
+++ b/packages/bridge-ui/src/pages/home/Home.svelte
@@ -1,18 +1,30 @@
 <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';
-  $: isBridge = activeTab === 'bridge';
+  // List of tab's name <=> route association
+  // TODO: add this into a general configuration.
+  const tabsRoute = [
+    { name: 'bridge', href: '/' },
+    { name: 'transactions', href: '/transactions' },
+    // Add more tabs if needed
+  ];
+
+  // TODO: we're assuming we have only two tabs here.
+  //       Change strategy if needed.
+  $: activeTab = $location === '/' ? tabsRoute[0].name : tabsRoute[1].name;
+
+  // TODO: do we really need all these tricks to style containers
+  //       Rethink this part: fluid, fixing on bigger screens
+  $: isBridge = activeTab === tabsRoute[0].name;
   $: styleContainer = isBridge ? '' : `min-width: ${bridgeWidth}px;`;
   $: fitClassContainer = isBridge ? 'max-w-fit' : 'w-fit';
   $: styleInner =
@@ -26,34 +38,29 @@
   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>
-
-    {#if activeTab === 'bridge'}
+    style={styleInner}
+    bind:activeTab>
+    {@const tab1 = tabsRoute[0]}
+    {@const tab2 = tabsRoute[1]}
+
+    <TabList class="block mb-4">
+      <Tab name={tab1.name} href={tab1.href}>Bridge</Tab>
+      <Tab name={tab2.name} href={tab2.href}>
+        Transactions ({$transactions.length})
+      </Tab>
+    </TabList>
+
+    <TabPanel tab={tab1.name}>
       <TaikoBanner />
       <div class="px-4">
         <BridgeForm />
       </div>
-    {:else}
+    </TabPanel>
+
+    <TabPanel tab={tab2.name}>
       <Transactions />
-    {/if}
-  </div>
+    </TabPanel>
+  </Tabs>
 </div>
-
-<style>
-  .tabs {
-    display: block;
-  }
-</style>