Cookies_Github_mirror/AquaDX
4
0
Fork 1
mirror of https://github.com/MewoLab/AquaDX.git synced 2026-02-09 02:37:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

[+] Home page tabs

Browse Source
This commit is contained in:
Azalea
2024-03-02 19:48:29 -05:00
parent d33c892303
commit c2fef3fa25
1 changed files with 22 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
AquaNet/src/pages/Home.svelte
View File

@@ -1,11 +1,31 @@
<script> <script>
import { fade } from "svelte/transition";
import LinkCard from "./Home/LinkCard.svelte"; import LinkCard from "./Home/LinkCard.svelte";
import SetupInstructions from "./Home/SetupInstructions.svelte"; import SetupInstructions from "./Home/SetupInstructions.svelte";
import {FADE_IN, FADE_OUT} from "../libs/config";
let tab = 0;
</script> </script>
<main class="content"> <main class="content">
<h2>Welcome to AquaDX!</h2> <h2>Welcome to AquaDX!</h2>
<LinkCard/> <nav class="tabs">
<SetupInstructions/> <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> </main>