Monorepo for Tangled
Something went wrong. Try again.
Svelte
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667<script module lang="ts"> import { tv } from "tailwind-variants";
export const accountSelector = tv({ slots: { chevron: "size-3 shrink-0", header: "px-2 py-1.5 font-medium" } });</script>
<script lang="ts"> import ChevronDown from "$icon/chevron-down"; import type { AuthAccount } from "$lib/auth.svelte"; import Dropdown, { 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; disabled?: boolean; group?: string; class?: string; align?: DropdownVariants["align"]; }
let { accounts, value = $bindable(), label = "Post as", disabled = false, group, class: className, align }: 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} ${selected.handle}`} class={className} variant="button" title="Select an account" > {#snippet trigger()} <User did={selected.did} handle={selected.handle} class="min-w-0" /> <ChevronDown class={classes.chevron()} aria-hidden="true" /> {/snippet}
<div class={classes.header()}>{label}</div> {#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}