leaflet.pub
a tool for shared writing and social publishing
bluesky profile link
cozylittle.house
+16
-2
+15
-1
app/p/[didOrHandle]/(profile)/ProfileHeader.tsx
+15
-1
app/p/[didOrHandle]/(profile)/ProfileHeader.tsx
···
7
7
import { colorToString } from "components/ThemeManager/useColorAttribute";
8
8
import { PubIcon } from "components/ActionBar/Publications";
9
9
import { Json } from "supabase/database.types";
10
+
import { BlueskyTiny } from "components/Icons/BlueskyTiny";
10
11
11
12
export const ProfileHeader = (props: {
12
13
profile: ProfileData;
···
15
16
let profileRecord = props.profile.record as AppBskyActorProfile.Record;
16
17
17
18
return (
18
-
<div className="flex flex-col" id="profile-header">
19
+
<div className="flex flex-col relative" id="profile-header">
19
20
<Avatar
20
21
src={
21
22
profileRecord.avatar?.ref &&
···
25
26
className="mx-auto mt-3 sm:mt-4"
26
27
giant
27
28
/>
29
+
<ProfileLinks handle={props.profile.handle || ""} />
28
30
<div className="flex flex-col">
29
31
<h3 className=" px-3 sm:px-4 pt-2 leading-tight">
30
32
{profileRecord.displayName
···
55
57
);
56
58
};
57
59
60
+
const ProfileLinks = (props: { handle: string }) => {
61
+
return (
62
+
<div className="absolute sm:top-4 top-3 sm:right-4 right-3 flex flex-row gap-2">
63
+
<a
64
+
className="text-tertiary hover:text-accent-contrast hover:no-underline!"
65
+
href={`https://bsky.app/profile/${props.handle}`}
66
+
>
67
+
<BlueskyTiny />
68
+
</a>
69
+
</div>
70
+
);
71
+
};
58
72
const PublicationCard = (props: {
59
73
record: PubLeafletPublication.Record;
60
74
uri: string;
+1
-1
app/p/[didOrHandle]/(profile)/layout.tsx
+1
-1
app/p/[didOrHandle]/(profile)/layout.tsx