Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091<script module lang="ts"> import { tv } from "tailwind-variants";
export const accountSelector = tv({ slots: { chevron: "ml-auto size-3.5 shrink-0", header: "px-xs py-1.5 font-medium", prefixed: "min-w-0 truncate typography-paragraph-regular" } });</script>
<script lang="ts"> import ChevronDown from "$icon/chevron-down"; import type { AuthAccount } from "$lib/auth.svelte"; import Dropdown, { type DropdownProps, type DropdownVariants } from "$lib/components/ui/Dropdown.svelte"; import DropdownItem from "$lib/components/ui/DropdownItem.svelte"; import User from "$lib/components/ui/User.svelte";
interface Props { accounts: readonly AuthAccount[]; value: string; label?: string | false; disabled?: boolean; group?: string; class?: string; triggerClass?: string; matchTriggerWidth?: boolean; align?: DropdownVariants["align"]; variant?: DropdownProps["variant"]; prefix?: string; }
let { accounts, value = $bindable(), label = "Post as", disabled = false, group, class: className, triggerClass, matchTriggerWidth = false, align, variant = "button", prefix }: Props = $props();
const selected = $derived(accounts.find((account) => account.did === value)); const others = $derived(accounts.filter((account) => account.did !== value)); const classes = accountSelector();</script>
{#if selected && others.length > 0} <Dropdown {group} {disabled} {align} label={label === false ? undefined : `${label} ${selected.handle}`} class={className} {triggerClass} {matchTriggerWidth} {variant} title="Select an account" > {#snippet trigger()} <User did={selected.did} handle={selected.handle} showText={prefix === undefined} class="min-w-0" /> {#if prefix !== undefined} <span class={classes.prefixed()}>{prefix}{selected.handle}</span> {/if} <ChevronDown class={classes.chevron()} aria-hidden="true" /> {/snippet}
{#if label !== false} <div class={classes.header()}>{label}</div> {/if} {#each others as account (account.did)} <DropdownItem onclick={() => (value = account.did)}> <User did={account.did} handle={account.handle} class="min-w-0" /> </DropdownItem> {/each} </Dropdown>{/if}