Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748<script lang="ts"> import Check from "$icon/check"; import Github from "$icon/github"; import LogOut from "$icon/log-out"; import Button from "$lib/components/ui/Button.svelte"; import Spinner from "$lib/components/ui/Spinner.svelte";
interface Props { connected: boolean; connectHref: string; onDisconnect: () => void; pending?: boolean; }
let { connected, connectHref, onDisconnect, pending = false }: Props = $props();</script>
<div class="flex flex-wrap items-center justify-between gap-3"> <div class="flex items-center gap-3"> <Button href={connected ? undefined : (connectHref as `/${string}`)} icon={Github} disabled={connected || pending} > Connect to your GitHub account </Button> {#if pending} <span role="status" class="flex items-center gap-2 typography-paragraph-small text-foreground-muted" > <Spinner class="size-4" />Loading… </span> {:else if connected} <span class="flex items-center gap-1.5 typography-paragraph-small text-foreground-success" > <Check class="size-4" aria-hidden="true" />Connected </span> {/if} </div> {#if connected} <Button variant="ghost" icon={LogOut} onclick={onDisconnect}> Disconnect account </Button> {/if}</div>