From c2fef3fa251a70309b9b9d1cc8f610ceae1daa97 Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Sat, 2 Mar 2024 19:48:29 -0500
Subject: [PATCH] [+] Home page tabs

---
 AquaNet/src/pages/Home.svelte | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/AquaNet/src/pages/Home.svelte b/AquaNet/src/pages/Home.svelte
index ce9e71d3..74b3cda2 100644
--- a/AquaNet/src/pages/Home.svelte
+++ b/AquaNet/src/pages/Home.svelte
@@ -1,11 +1,31 @@
 <script>
+  import { fade } from "svelte/transition";
   import LinkCard from "./Home/LinkCard.svelte";
   import SetupInstructions from "./Home/SetupInstructions.svelte";
+  import {FADE_IN, FADE_OUT} from "../libs/config";
+
+  let tab = 0;
 </script>
 
 <main class="content">
   <h2>Welcome to AquaDX!</h2>
 
-  <LinkCard/>
-  <SetupInstructions/>
+  <nav class="tabs">
+    <button class:active={tab === 0} on:click={() => tab = 0}>Welcome</button>
+    <button class:active={tab === 1} on:click={() => tab = 1}>Link Card</button>
+    <button class:active={tab === 2} on:click={() => tab = 2}>Setup Instructions</button>
+  </nav>
+
+  {#if tab === 0}
+    <div out:fade={FADE_OUT} in:fade={FADE_IN}>
+    </div>
+  {:else if tab === 1}
+    <div out:fade={FADE_OUT} in:fade={FADE_IN}>
+      <LinkCard/>
+    </div>
+  {:else if tab === 2}
+    <div out:fade={FADE_OUT} in:fade={FADE_IN}>
+      <SetupInstructions/>
+    </div>
+  {/if}
 </main>
\ No newline at end of file