Something went wrong. Try again.
Client side atproto account migrator in your web browser, along with services for backups and adversarial migrations. pdsmoover.com
pds atproto migrations moo cow
Something went wrong. Try again.
2.1 kB · 51 lines
Svelte
at oauth
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152<script lang="ts"> import LoadingSpinner from '$lib/components/LoadingSpinner.svelte'; import type {HTMLButtonAttributes} from 'svelte/elements'; import type {Snippet} from 'svelte';
type ButtonVariant = 'primary' | 'secondary' | 'danger'; type ButtonSize = 'md' | 'sm';
type Props = HTMLButtonAttributes & { /** Visual style; primary matches the site's classic button, secondary is a quiet outline */ variant?: ButtonVariant; /** sm is a compact button for inline use (table rows, next to headings) */ size?: ButtonSize; /** Shows a spinner and disables the button while true */ busy?: boolean; class?: string; children: Snippet; };
let { variant = 'primary', size = 'md', busy = false, type = 'button', disabled = false, class: className = '', children, ...rest }: Props = $props();
const variantClasses: Record<ButtonVariant, string> = { primary: 'border-transparent bg-accent text-white shadow-sm hover:bg-[#535bf2] hover:shadow-md', secondary: 'border-[rgba(128,128,128,0.5)] bg-transparent hover:border-accent hover:bg-accent-soft', danger: 'border-transparent bg-[#c62828] text-white hover:bg-[#b71c1c] hover:shadow-md', };
const sizeClasses: Record<ButtonSize, string> = { md: 'px-[1.2em] py-[0.6em] text-base', sm: 'px-[0.6em] py-[0.2em] text-[0.9em]', };</script>
<button {type} disabled={disabled || busy} class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-lg border font-medium transition-[background-color,border-color,color,box-shadow,transform] duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-60 disabled:shadow-none {variantClasses[variant]} {sizeClasses[size]} {className}" {...rest}> {#if busy}<LoadingSpinner size={16}/>{/if} {@render children()}</button>