pleroma-like client for Bluesky
pl.hexmani.ac
hexmani.ac
bluesky
pleroma
social-media
1import { Component, Match, Show, Switch, createResource } from "solid-js";
2import { Client } from "@atcute/client";
3import { agent } from "./login";
4
5type MiniProfileProps = {
6 did: `did:${string}:${string}`;
7};
8
9async function getProfileDetails(did: `did:${string}:${string}`) {
10 const rpc = new Client({ handler: agent });
11
12 const res = await rpc.get("app.bsky.actor.getProfile", {
13 params: {
14 actor: did,
15 },
16 });
17
18 if (!res.ok) {
19 throw new Error(`Failed to fetch profile details: ${res.status}`);
20 }
21
22 return res.data;
23}
24
25const MiniProfile = (props: MiniProfileProps) => {
26 const [profileInfo] = createResource(agent.sub, getProfileDetails);
27
28 return (
29 <>
30 <Show when={profileInfo.loading}>
31 <p>loading...</p>
32 </Show>
33 <Switch>
34 <Match when={profileInfo.error}>
35 <p>Error: {profileInfo.error.message}</p>
36 </Match>
37 <Match when={profileInfo()}>
38 <div
39 class="mini-profile"
40 // todo: add banner fade
41 style={`background-image: linear-gradient(to bottom, rgba(15, 22, 30, 0.85)), url(${profileInfo()?.banner}); background-size: cover; background-repeat: no-repeat;`}
42 >
43 <img
44 src={profileInfo()?.avatar}
45 alt={`Profile picture for ${profileInfo()?.handle}`}
46 />
47 <div class="mini-profile-info">
48 <p>{profileInfo()?.displayName}</p>
49 <p>@{profileInfo()?.handle}</p>
50 </div>
51 </div>
52 </Match>
53 </Switch>
54 </>
55 );
56};
57
58export default MiniProfile;