git-sync/profilarr
1
0
Fork 0
mirror of https://github.com/Dictionarry-Hub/profilarr.git synced 2026-01-27 21:20:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(tabs): enhance tab navigation with back button support and layout adjustments

Browse Source
This commit is contained in:
Sam Chau
2025-11-05 21:40:33 +10:30
parent ee35e335d7
commit 697d241adf
1 changed files with 35 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/lib/client/ui/navigation/tabs/Tabs.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts">
import type { ComponentType } from 'svelte';
import { ArrowLeft } from 'lucide-svelte';
interface Tab {
label: string;
@@ -8,26 +9,44 @@
icon?: ComponentType;
}
interface BackButton {
label: string;
href: string;
}
export let tabs: Tab[] = [];
export let backButton: BackButton | undefined = undefined;
</script>
<div class="border-b border-neutral-200 dark:border-neutral-800">
<nav class="-mb-px flex gap-2" aria-label="Tabs">
{#each tabs as tab (tab.href)}
<a
href={tab.href}
class="flex items-center gap-2 border-b-2 px-4 py-3 text-sm font-medium transition-colors {tab.active
? 'border-blue-600 text-blue-600 dark:border-blue-500 dark:text-blue-500'
: 'border-transparent text-neutral-600 hover:border-neutral-300 hover:text-neutral-900 dark:text-neutral-400 dark:hover:border-neutral-700 dark:hover:text-neutral-50'}"
>
{#if tab.icon}
<svelte:component this={tab.icon} size={16} />
{/if}
{tab.label}
</a>
{/each}
<nav class="-mb-px flex items-center justify-between gap-2" aria-label="Tabs">
<div class="flex gap-2">
{#each tabs as tab (tab.href)}
<a
href={tab.href}
class="flex items-center gap-2 border-b-2 px-4 py-3 text-sm font-medium transition-colors {tab.active
? 'border-blue-600 text-blue-600 dark:border-blue-500 dark:text-blue-500'
: 'border-transparent text-neutral-600 hover:border-neutral-300 hover:text-neutral-900 dark:text-neutral-400 dark:hover:border-neutral-700 dark:hover:text-neutral-50'}"
>
{#if tab.icon}
<svelte:component this={tab.icon} size={16} />
{/if}
{tab.label}
</a>
{/each}
<!-- Actions slot for custom action tabs (like Add Instance) -->
<slot name="actions" />
<!-- Actions slot for custom action tabs (like Add Instance) -->
<slot name="actions" />
</div>
{#if backButton}
<a
href={backButton.href}
class="flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-neutral-600 transition-colors hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100"
>
<ArrowLeft size={14} />
{backButton.label}
</a>
{/if}
</nav>
</div>