Monorepo for Tangled
web/ui: clean up Tabs.svelte nesting
Signed-off-by: eti <eti@eti.tf>
+26
-29
+26
-29
web/src/lib/components/ui/Tabs.svelte
+26
-29
web/src/lib/components/ui/Tabs.svelte
···
23
23
let { tabs, active, label }: Props = $props();
24
24
</script>
25
25
26
-
<nav class="w-full overflow-x-auto overflow-y-hidden pl-4" aria-label={label}>
27
-
<div class="flex">
28
-
{#each tabs as tab (tab.id)}
29
-
{@const isActive = active === tab.id}
30
-
{@const Glyph = tab.icon}
31
-
<a
32
-
href={resolve(tab.href as "/")}
33
-
class="group relative -mr-px no-underline hover:no-underline"
34
-
aria-current={isActive ? "page" : undefined}
35
-
>
36
-
<div
37
-
class={`relative mr-1 min-w-[80px] rounded-t px-4 py-1 text-center whitespace-nowrap text-foreground-default ${
38
-
isActive
39
-
? "-mb-px bg-background-default font-medium"
40
-
: "group-hover:bg-background-inset/25"
41
-
}`}
26
+
<nav class="flex w-full overflow-x-auto overflow-y-hidden pl-4" aria-label={label}>
27
+
{#each tabs as tab (tab.id)}
28
+
{@const isActive = active === tab.id}
29
+
{@const Glyph = tab.icon}
30
+
<a
31
+
href={tab.href.startsWith("/") ? resolve(tab.href as "/") : tab.href}
32
+
aria-current={isActive ? "page" : undefined}
33
+
class={`relative mr-1 flex items-center rounded-t px-4 py-1 whitespace-nowrap text-foreground-default no-underline hover:no-underline ${
34
+
isActive
35
+
? "-mb-px bg-background-default [-webkit-text-stroke:0.3px_currentColor]"
36
+
: "hover:bg-background-inset"
37
+
}`}
38
+
>
39
+
{#if Glyph}
40
+
<Glyph class="mr-2 h-4 w-4" aria-hidden="true" />
41
+
{/if}
42
+
<span class="flex flex-col">
43
+
{tab.label}
44
+
<span aria-hidden="true" class="invisible h-0 select-none overflow-hidden font-medium"
45
+
>{tab.label}</span
42
46
>
43
-
<span class="flex items-center justify-center">
44
-
{#if Glyph}
45
-
<Glyph class="mr-2 h-4 w-4" aria-hidden="true" />
46
-
{/if}
47
-
{tab.label}
48
-
{#if tab.count}
49
-
<span class="ml-1 rounded bg-background-inset px-1 text-sm">{tab.count}</span>
50
-
{/if}
51
-
</span>
52
-
</div>
53
-
</a>
54
-
{/each}
55
-
</div>
47
+
</span>
48
+
{#if tab.count}
49
+
<span class="ml-1 rounded bg-background-inset px-1 text-sm">{tab.count}</span>
50
+
{/if}
51
+
</a>
52
+
{/each}
56
53
</nav>