48 lines
1.5 KiB
Svelte
48 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
|
|
import UnlockDialog from './UnlockDialog.svelte';
|
|
import { isPremium, refreshPremium } from './premium';
|
|
|
|
let open = $state(false);
|
|
|
|
// Verify once on load so the badge reflects real status site-wide.
|
|
onMount(refreshPremium);
|
|
</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 {$isPremium
|
|
? '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={$isPremium ? 'Supporter extras active' : 'Support Drizz.li'}
|
|
aria-label={$isPremium ? 'Supporter extras active' : 'Support Drizz.li'}
|
|
>
|
|
{#if $isPremium}
|
|
<!-- star -->
|
|
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
|
<path
|
|
d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.9 6.1 20.5l1.2-6.5L2.5 9.4l6.6-.9L12 2.5z"
|
|
/>
|
|
</svg>
|
|
<span class="hidden sm:inline">Premium</span>
|
|
{:else}
|
|
<!-- padlock -->
|
|
<svg
|
|
class="h-4 w-4"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.75"
|
|
aria-hidden="true"
|
|
>
|
|
<rect x="4" y="10" width="16" height="11" rx="2" />
|
|
<path stroke-linecap="round" d="M8 10V7a4 4 0 0 1 8 0v3" />
|
|
</svg>
|
|
<span class="hidden sm:inline">Premium</span>
|
|
{/if}
|
|
</button>
|
|
|
|
<UnlockDialog bind:open />
|