BlueSky & more on desktop
lazurite.stormlightlabs.org/
tauri
rust
typescript
bluesky
appview
atproto
solid
1import { AvatarBadge } from "$/components/AvatarBadge";
2import { Show } from "solid-js";
3import type { AccountIdentity } from "./types";
4
5export function SwitcherIdentity(props: { compact: boolean; identity: AccountIdentity }) {
6 const label = () => props.identity.label;
7 const avatar = () => props.identity.avatar;
8 const name = () => props.identity.name;
9 const meta = () => props.identity.meta;
10 const tone = () => props.identity.tone;
11
12 return (
13 <div class="flex min-w-0 items-center gap-3" classList={{ "justify-center": !!props.compact }}>
14 <div
15 classList={{
16 "flex h-12 w-12 items-center justify-center rounded-full border ui-outline-subtle bg-surface shadow-[0_1px_2px_rgba(15,23,42,0.08)]":
17 !!props.compact,
18 }}>
19 <AvatarBadge label={label()} src={avatar()} tone={tone()} />
20 </div>
21 <Show when={!props.compact}>
22 <div class="grid min-w-0">
23 <span class="truncate text-[0.92rem] font-semibold">{name()}</span>
24 <span class="text-xs text-on-surface-variant">{meta()}</span>
25 </div>
26 </Show>
27 </div>
28 );
29}