hexmani.ac
social bookmarking for atproto
1/*
2 * clippr: a social bookmarking service for the AT Protocol
3 * Copyright (c) 2025 clippr contributors.
4 * SPDX-License-Identifier: AGPL-3.0-only
5 */
6
7import { createResource, Match, Show, splitProps, Switch } from "solid-js";
8import { agent } from "./loginForm.tsx";
9import { fetchProfile } from "../utils/profile.ts";
10
11interface ProfileProps {
12 actor?: string;
13}
14
15const ProfileWidget = (props: ProfileProps) => {
16 const [local] = splitProps(props, ["actor"]);
17 const actor = () => local.actor ?? agent.session.info.sub;
18
19 const [profile] = createResource(actor, fetchProfile);
20
21 return (
22 <div>
23 <Show when={profile.loading}>
24 <p>loading...</p>
25 </Show>
26 <Switch>
27 <Match when={profile.error}>
28 <p>error: {profile.error.message}</p>
29 </Match>
30 <Match when={profile()}>
31 <div id="profile-view">
32 <img
33 src={profile()?.avatar}
34 class="profile-picture"
35 alt="The user's avatar."
36 />
37 <div>
38 <p>
39 <b>{profile()?.displayName}</b>
40 </p>
41 <p title={profile()?.did}>
42 {profile()?.handle.replace("at://", "@")}
43 </p>
44 <p>{profile()?.description}</p>
45 </div>
46 </div>
47 </Match>
48 </Switch>
49 </div>
50 );
51};
52
53export { ProfileWidget };