36 lines
1.2 KiB
Svelte
36 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { page } from '$app/state';
|
|
import type { Snippet } from 'svelte';
|
|
|
|
const variants = {
|
|
primary:
|
|
'px-4 py-2 text-sm font-medium text-white bg-emerald-800 hover:bg-emerald-900 rounded-xl transition-all duration-200 ease-in-out disabled:opacity-70 disabled:cursor-not-allowed',
|
|
secondary:
|
|
'px-4 py-2 text-sm font-medium text-gray-100 bg-gray-600 border border-gray-300 hover:bg-gray-500 rounded-xl transition-all duration-200 ease-in-out',
|
|
danger:
|
|
'px-4 py-2 text-sm font-medium text-white bg-red-800 hover:bg-red-900 rounded-xl transition-all duration-200 ease-in-out disabled:opacity-70 disabled:cursor-not-allowed'
|
|
};
|
|
|
|
type Props = {
|
|
children: Snippet;
|
|
onClick?: (e: MouseEvent) => void;
|
|
disabled?: boolean;
|
|
variant?: keyof typeof variants;
|
|
href?: string;
|
|
};
|
|
let { children, onClick, disabled, variant = 'primary', href }: Props = $props();
|
|
|
|
const isActive = page.params.year === href?.split('/').pop();
|
|
$inspect(isActive, 'isActive', page.params.year, href);
|
|
</script>
|
|
|
|
{#if href}
|
|
<a {href} class={variants[variant]} class:!bg-gray-900={isActive}>
|
|
{@render children()}
|
|
</a>
|
|
{:else}
|
|
<button style:cursor="pointer" class={variants[variant]} onclick={onClick} {disabled}>
|
|
{@render children()}
|
|
</button>
|
|
{/if}
|