Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 1,858 Bytes
b3c3418 4a8ebd7 b3c3418 4a8ebd7 b3c3418 4a8ebd7 b3c3418 4a8ebd7 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 |
<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();
</script>
<button
onclick={showModal}
class={[
"flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors",
"bg-gray-100/50 hover:bg-gray-100 active:bg-gray-200",
"dark:bg-gray-800/70 dark:hover:bg-gray-700 dark:active:bg-gray-700/50",
]}
>
<!-- 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" />
{:else}
<IconUser class="h-4 w-4" />
{/if}
<!-- Billing info -->
<div class="flex flex-col items-start">
<div class="flex items-center gap-1.5">
<span class="font-medium">
{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>
|