web/PageNavTab: use icon prop instead of slot

This commit is contained in:
wukko
2024-11-20 14:15:34 +06:00
parent a0616841bf
commit 1833a95027
3 changed files with 62 additions and 72 deletions

View File

@ -3,25 +3,26 @@
import IconChevronRight from "@tabler/icons-svelte/IconChevronRight.svelte";
export let tabPath: string;
export let tabTitle: string;
export let path: string;
export let title: string;
export let icon: ConstructorOfATypedSvelteComponent;
export let iconColor: "gray" | "blue" | "green" = "gray";
$: isActive = $page.url.pathname === tabPath;
$: isActive = $page.url.pathname === path;
</script>
<a
class="subnav-tab"
href={tabPath}
href={path}
class:active={isActive}
role="button"
>
<div class="subnav-tab-left">
<div class="tab-icon" style="background: var(--{iconColor})">
<slot></slot>
<svelte:component this={icon} />
</div>
<div class="subnav-tab-text">
{tabTitle}
{title}
</div>
</div>
<div class="subnav-tab-chevron">