ptr.pet
1<script lang="ts">
2 interface Props {
3 highlight?: boolean;
4 name: string;
5 href: string;
6 iconUri: string;
7 }
8
9 let { highlight = false, name, href, iconUri }: Props = $props();
10</script>
11
12<a
13 class="
14 max-w-36 p-0.5 pr-1.5 border-ralsei-white border-4
15 {highlight
16 ? 'min-w-36 bg-gradient-to-l to-ralsei-pink-neon/30 from-ralsei-pink-regular/20 from-30% border-ridge motion-safe:animate-pulse hover:animate-none'
17 : 'w-fit border-double hover:border-solid animate-bounce-reverse hover:underline'}
18 flex gap-1 items-center justify-center align-middle text-center
19 {highlight ? 'text-ralsei-pink-regular app-selected-route' : 'text-ralsei-green-light'}
20 "
21 title={name}
22 href="/{href}"
23 data-sveltekit-preload-data="tap"
24>
25 <img class="max-w-4" style="image-rendering: pixelated;" src={iconUri} alt={name} />
26 <div
27 class="font-monospace text-sm/3 overflow-hidden text-ellipsis text-nowrap [text-decoration-line:inherit]"
28 >
29 {name}
30 </div>
31</a>