96 lines
1.9 KiB
Svelte
96 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
|
|
type ButtonColor = 'brand' | 'accent' | 'bg';
|
|
|
|
interface Props {
|
|
children: import('svelte').Snippet;
|
|
href?: string;
|
|
color?: ButtonColor;
|
|
onclick?: (e: MouseEvent) => void;
|
|
[key: string]: any;
|
|
}
|
|
|
|
let { children, href, color = 'bg', onclick, ...rest }: Props = $props();
|
|
|
|
const isLink = $derived(!!href);
|
|
const isExternal = $derived(href?.startsWith('http'));
|
|
</script>
|
|
|
|
{#if isLink}
|
|
<a
|
|
{href}
|
|
class="hitbox-wrapper"
|
|
target={isExternal ? '_blank' : undefined}
|
|
rel={isExternal ? 'noopener noreferrer' : undefined}
|
|
{...rest}
|
|
><span class="btn {color}">
|
|
{@render children?.()}
|
|
</span>
|
|
</a>
|
|
{:else}
|
|
<button class="hitbox-wrapper" {onclick} {...rest}>
|
|
<span class="btn {color}">{@render children?.()}</span>
|
|
</button>
|
|
{/if}
|
|
|
|
<style>
|
|
.hitbox-wrapper {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 48px;
|
|
min-width: 98px;
|
|
appearance: none;
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0 4px;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: fit-content;
|
|
flex-shrink: 0;
|
|
padding: 0 1.2rem;
|
|
min-width: 90px;
|
|
height: 36px;
|
|
border-radius: 20px;
|
|
border: none;
|
|
box-shadow: var(--shadow-small);
|
|
font-family: 'URW Gothic', sans-serif;
|
|
font-size: 0.93rem;
|
|
font-weight: 400;
|
|
letter-spacing: 0.05ch;
|
|
transition:
|
|
all 0.1s ease,
|
|
box-shadow 0.2s;
|
|
}
|
|
|
|
.accent {
|
|
background-color: var(--color-accent);
|
|
color: var(--color-title);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.brand {
|
|
background-color: var(--color-brand);
|
|
color: rgb(30, 30, 30);
|
|
}
|
|
|
|
.bg {
|
|
background-color: var(--color-bg-light);
|
|
color: var(--color-title);
|
|
}
|
|
|
|
.hitbox-wrapper:hover .btn {
|
|
filter: brightness(1.5);
|
|
}
|
|
|
|
.hitbox-wrapper:active .btn {
|
|
transform: scale(0.98);
|
|
}
|
|
</style>
|