Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
at icy/tmrrpn
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263<script module lang="ts"> import { tv } from "tailwind-variants";
export const accountSelector = tv({ slots: { chevron: "size-3 shrink-0", header: "border-b-0 px-2 py-1.5" } });</script>
<script lang="ts"> import ChevronDown from "$icon/chevron-down"; import type { AuthAccount } from "$lib/auth.svelte"; import Dropdown 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; }
let { accounts, value = $bindable(), label = "Post as", disabled = false, group, class: className }: 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} label={`${label} ${selected.handle}`} class={className} variant="button" > {#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}