microcosm.blue
Relay firehose browser tools: https://compare.hose.cam
bad-example.com
1import { useState, useEffect } from 'react';
2import { MiniDoc, Collection, Rkey } from './types';
3import { getRecord } from './microcosm';
4
5function Pfp({ did, link }: {
6 did: Did,
7 link: String,
8}) {
9 const CDN = 'https://cdn.bsky.app/img/avatar_thumbnail/plain'; // freeloading
10 const url = `${CDN}/${did.val}/${link}@jpeg`
11 return <img
12 alt="avatar"
13 src={url}
14 style={{
15 display: "block",
16 width: "100%",
17 height: "100%",
18 }}
19 />;
20}
21
22function LilUser({ doc, children }: {
23 doc: MiniDoc,
24 children: any,
25}) {
26 const [pfpLink, setPfpLink] = useState(null);
27 const [displayName, setDisplayName] = useState(null);
28
29 useEffect(() => {
30 let cancel = false;
31 (async () => {
32 const uri = `at://${doc.did.val}/app.bsky.actor.profile/self`;
33 const profile = await getRecord(
34 doc.did,
35 new Collection('app.bsky.actor.profile'),
36 new Rkey('self'),
37 );
38 const link = profile?.avatar?.ref?.$link;
39 if (link && !cancel) setPfpLink(link);
40 const name = profile?.displayName;
41 if (name && !cancel) setDisplayName(name);
42 })();
43 return () => cancel = true;
44 }, [doc.did.val]);
45
46 return (
47 <div style={{
48 display: "flex",
49 textAlign: "left",
50 alignItems: "center",
51 background: "#333",
52 padding: "0.5em 0.6em",
53 gap: "0.6em",
54 borderRadius: "0.3em",
55 }}>
56 <div style={{
57 background: "#000",
58 height: "42px",
59 width: "42px",
60 display: "flex",
61 justifyContent: "center",
62 alignItems: "center",
63 color: "#858",
64 fontSize: "0.8em",
65 borderRadius: "100%",
66 flexShrink: "0",
67 overflow: "hidden",
68 }}>
69 {pfpLink
70 ? <Pfp did={doc.did} link={pfpLink} />
71 : <>…</>}
72 </div>
73 <div style={{
74 flexGrow: "1",
75 }}>
76 <h3 style={{
77 margin: 0,
78 fontSize: "1em",
79 }}>
80 {displayName || doc.handle.val}
81 </h3>
82 <p style={{
83 fontSize: "1em",
84 margin: 0,
85 lineHeight: "1",
86 opacity: "0.8",
87 }}>
88 {displayName && <><code>{doc.handle.val}</code><br/></>}
89 <code>{doc.did.val}</code>
90 </p>
91 </div>
92 {children && (
93 <div>
94 {children}
95 </div>
96 )}
97 </div>
98 )
99}
100
101export default LilUser;