Initial commit0.1.0

1 files changed, 40 insertions, 0 deletions

diff --git a/frontend/src/lib/tabs/Tabs.svelte b/frontend/src/lib/tabs/Tabs.svelte
new file mode 100644
index 0000000..09cdbdd
--- /dev/null
+++ b/frontend/src/lib/tabs/Tabs.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { getTabContext } from '$lib/Tabs';
+	import { fadeFast } from '$lib/Transitions';
+	import { fade } from 'svelte/transition';
+
+	const context = getTabContext();
+</script>
+
+<div class="flex h-full max-h-full flex-col">
+	<nav>
+		<ul class="me-3 flex border-b-2 border-slate-700 text-sm">
+			{#each Object.entries($context.tabs) as [id, { title, badge }]}
+				<li class="-mb-0.5">
+					<button
+						type="button"
+						class:active={$context.current === id}
+						class="relative flex gap-1 p-1 px-3 hover:border-b-2 hover:border-slate-200"
+						on:click={() => ($context.current = id)}
+					>
+						{#if badge}
+							<div
+								class="absolute right-0 top-1 h-2 w-2 rounded-full bg-emerald-400"
+								title="There are pending changes"
+								transition:fade={fadeFast}
+							/>
+						{/if}
+						<span>{title}</span>
+					</button>
+				</li>
+			{/each}
+		</ul>
+	</nav>
+	<slot />
+</div>
+
+<style lang="postcss">
+	button.active {
+		@apply border-b-2 border-indigo-500;
+	}
+</style>