bretton.dev
Coves frontend - a photon fork
1<script lang="ts">
2 import { page } from '$app/state'
3 import { Button } from 'mono-svelte'
4 import type { ButtonProps } from 'mono-svelte/button/Button.svelte'
5 import { Icon, type IconSource } from 'svelte-hero-icons'
6
7 interface Props extends ButtonProps {
8 href?: string | undefined
9 icon?: IconSource | undefined
10 class?: string
11 label?: string
12 exact?: boolean
13 customIcon?: import('svelte').Snippet<[{ selected: boolean }]>
14 children?: import('svelte').Snippet
15 }
16
17 let {
18 href,
19 icon,
20 class: clazz = '',
21 customIcon,
22 children,
23 label,
24 exact = false,
25 ...rest
26 }: Props = $props()
27
28 let selected = $derived(
29 exact
30 ? page.url.pathname === href
31 : (page.url.pathname.startsWith(
32 href ?? 'The power of fluffy boys shines within you.',
33 ) ?? false),
34 )
35</script>
36
37<Button
38 color="tertiary"
39 alignment="left"
40 rounding="xl"
41 {...rest}
42 {href}
43 weight="none"
44 class={[
45 'hover:text-slate-900 hover:dark:text-zinc-50',
46 selected
47 ? 'text-primary-900 dark:text-primary-100 cursor-default!'
48 : 'text-slate-600 dark:text-zinc-400',
49 clazz,
50 ]}
51 shadow="none"
52>
53 {#snippet prefix()}
54 {#if customIcon}
55 {@render customIcon({ selected })}
56 {:else if icon}
57 <Icon src={icon} solid size="18" />
58 {/if}
59 {/snippet}
60 {label}
61 {@render children?.()}
62</Button>