30 lines
1.0 KiB
Svelte
30 lines
1.0 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
|
|
import * as m from '$lib/paraglide/messages';
|
|
|
|
import SupporterIcon from './SupporterIcon.svelte';
|
|
import UnlockDialog from './UnlockDialog.svelte';
|
|
import { isSupporter, refreshSupporter } from './store';
|
|
|
|
let open = $state(false);
|
|
|
|
// Verify once on load so the badge reflects real status site-wide.
|
|
onMount(refreshSupporter);
|
|
</script>
|
|
|
|
<button
|
|
type="button"
|
|
class="flex h-9 shrink-0 cursor-pointer items-center gap-1.5 rounded-full border px-3 text-xs font-semibold transition-colors {$isSupporter
|
|
? 'border-amber-400/50 bg-amber-400/10 text-amber-700 hover:bg-amber-400/20 dark:text-amber-300'
|
|
: 'border-border/70 text-muted-foreground hover:bg-muted hover:text-foreground'}"
|
|
onclick={() => (open = true)}
|
|
title={$isSupporter ? m.supporter_active() : m.supporter_support()}
|
|
aria-label={$isSupporter ? m.supporter_active() : m.supporter_support()}
|
|
>
|
|
<SupporterIcon filled={$isSupporter} />
|
|
<span class="hidden sm:inline">{m.supporter_badge()}</span>
|
|
</button>
|
|
|
|
<UnlockDialog bind:open />
|