Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 2,385 Bytes
b3c3418 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<script lang="ts">
import { billing } from "$lib/state/billing.svelte";
import IconUser from "~icons/carbon/user";
import IconGroup from "~icons/carbon/group";
import IconWarning from "~icons/carbon/warning";
import IconCheckmark from "~icons/carbon/checkmark";
interface Props {
showModal?: () => void;
}
const { showModal }: Props = $props();
const statusColor = $derived(() => {
if (!billing.organization) return "text-gray-600 dark:text-gray-400";
if (billing.validating) return "text-yellow-600 dark:text-yellow-400";
if (billing.isValid) return "text-green-600 dark:text-green-400";
return "text-red-600 dark:text-red-400";
});
const bgColor = $derived(() => {
if (!billing.organization) return "bg-gray-50 dark:bg-gray-800";
if (billing.validating) return "bg-yellow-50 dark:bg-yellow-900/20";
if (billing.isValid) return "bg-green-50 dark:bg-green-900/20";
return "bg-red-50 dark:bg-red-900/20";
});
</script>
<button
onclick={showModal}
class="flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 {bgColor}"
>
<!-- Avatar or Icon -->
{#if billing.organization && billing.organizationInfo?.avatar && billing.isValid}
<img src={billing.organizationInfo.avatar} alt={billing.displayName} class="h-5 w-5 rounded-full" />
{:else if billing.organization}
<IconGroup class="h-4 w-4 {statusColor}" />
{:else}
<IconUser class="h-4 w-4 {statusColor}" />
{/if}
<!-- Billing info -->
<div class="flex flex-col items-start">
<div class="flex items-center gap-1">
<span class="font-medium {statusColor}">
{billing.displayName}
</span>
<!-- Status indicator -->
{#if billing.organization}
{#if billing.validating}
<div class="h-3 w-3 animate-spin rounded-full border border-yellow-600 border-t-transparent"></div>
{:else if billing.isValid}
<IconCheckmark class="h-3 w-3 text-green-600 dark:text-green-400" />
{:else}
<IconWarning class="h-3 w-3 text-red-600 dark:text-red-400" />
{/if}
{/if}
</div>
<span class="text-xs text-gray-500 dark:text-gray-400">
{#if billing.organization}
{#if billing.validating}
Validating organization...
{:else if billing.isValid}
Organization billing
{:else}
Organization not found
{/if}
{:else}
Personal billing
{/if}
</span>
</div>
</button>
|