You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
1.3 KiB
48 lines
1.3 KiB
<script lang="ts"> |
|
import type { Snippet } from "svelte"; |
|
|
|
interface Props { |
|
href?: string; |
|
disabled?: boolean; |
|
onclick?: () => void; |
|
children: Snippet; |
|
class?: string; |
|
reload?: boolean; |
|
ariaLabel?: string; |
|
} |
|
|
|
let { |
|
href, |
|
disabled = false, |
|
onclick, |
|
children, |
|
class: className = "", |
|
reload = false, |
|
ariaLabel, |
|
}: Props = $props(); |
|
|
|
const baseClasses = |
|
"inline-flex items-center justify-center px-6 py-4 bg-kv-yellow text-black kv-btn-text cursor-pointer transition-opacity hover:opacity-80 disabled:opacity-50 disabled:cursor-not-allowed kv-shadow-button border-4 border-black box-border focus:outline-none focus:ring-2 focus:ring-kv-blue focus:ring-offset-2 focus:ring-offset-black"; |
|
</script> |
|
|
|
{#if href && !disabled} |
|
<a |
|
{href} |
|
class="{baseClasses} {className}" |
|
data-sveltekit-reload={reload ? "" : undefined} |
|
aria-label={ariaLabel} |
|
role="button" |
|
> |
|
<span class="kv-shadow-text">{@render children()}</span> |
|
</a> |
|
{:else} |
|
<button |
|
class="{baseClasses} {className}" |
|
{disabled} |
|
{onclick} |
|
aria-label={ariaLabel} |
|
aria-disabled={disabled} |
|
> |
|
<span class="kv-shadow-text">{@render children()}</span> |
|
</button> |
|
{/if}
|
|
|