experiment: svelte ui

frontend/src/components/Tabs.svelte

@@ -0,0 +1,57 @@
+<!-- components/Tabs.svelte -->
+<script>
+export let activeTab = 'overview';
+export let tabs = [
+    { id: 'overview', label: 'Overview' },
+    { id: 'settings', label: 'Settings' }
+];
+</script>
+
+<div class="tabs-container">
+    {#each tabs as tab}
+        <button 
+            class="tab {activeTab === tab.id ? 'active' : ''}"
+            on:click={() => activeTab = tab.id}
+        >
+            {tab.label}
+        </button>
+    {/each}
+</div>
+
+<style>
+.tabs-container {
+    background-color: var(--bg-primary);
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+}
+
+.tab {
+    flex: 1;
+    padding: var(--spacing-md) var(--spacing-lg);
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    position: relative;
+    transition: color 0.2s ease;
+    font-size: 0.875rem;
+}
+
+.tab:hover {
+    color: var(--text-primary);
+}
+
+.tab.active {
+    color: var(--text-primary);
+}
+
+.tab.active::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background-color: var(--accent-primary);
+}
+</style>