leaflet.pub
a tool for shared writing and social publishing
replaces placehodler with profile pic
cozylittle.house
+21
-6
+17
-5
app/p/[didOrHandle]/ProfilePageLayout.tsx
+17
-5
app/p/[didOrHandle]/ProfilePageLayout.tsx
···
5
5
import { ProfileTabs, TabContent } from "./ProfileTabs/Tabs";
6
6
import { Json } from "supabase/database.types";
7
7
import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
8
+
import { Avatar } from "components/Avatar";
9
+
import { AppBskyActorProfile } from "lexicons/api";
10
+
import { blobRefToSrc } from "src/utils/blobRefToSrc";
8
11
9
12
export const ProfilePageLayout = (props: {
10
13
profile: {
···
51
54
}) => {
52
55
let [tab, setTab] = useState<profileTabsType>("activity");
53
56
54
-
let profileRecord = props.profile?.record as unknown as ProfileViewDetailed;
57
+
let profileRecord = props.profile?.record as AppBskyActorProfile.Record;
55
58
console.log(profileRecord);
56
59
60
+
if (!props.profile) return;
57
61
return (
58
62
<div
59
63
className={`
60
64
max-w-prose mx-auto w-full h-full
61
65
flex flex-col
62
-
border border-border rounded-md
66
+
border border-border-light rounded-lg
63
67
text-center px-3 sm:px-4 mt-8`}
64
68
>
65
-
<div className="bg-test rounded-full h-16 w-16 mx-auto -mt-8" />
66
-
<h3 className="pt-2">
69
+
<Avatar
70
+
src={
71
+
profileRecord.avatar?.ref &&
72
+
blobRefToSrc(profileRecord.avatar?.ref, props.profile.did)
73
+
}
74
+
displayName={profileRecord.displayName}
75
+
className="mx-auto -mt-8"
76
+
giant
77
+
/>
78
+
<h3 className="pt-2 leading-tight">
67
79
{profileRecord.displayName
68
80
? profileRecord.displayName
69
81
: `@${props.profile?.handle}`}
70
82
</h3>
71
83
{profileRecord.displayName && (
72
-
<div className="text-tertiary text-sm pb-1">
84
+
<div className="text-tertiary text-sm pb-1 italic">
73
85
@{props.profile?.handle}
74
86
</div>
75
87
)}
+4
-1
components/Avatar.tsx
+4
-1
components/Avatar.tsx
···
3
3
export const Avatar = (props: {
4
4
src: string | undefined;
5
5
displayName: string | undefined;
6
+
className?: string;
6
7
tiny?: boolean;
8
+
large?: boolean;
9
+
giant?: boolean;
7
10
}) => {
8
11
if (props.src)
9
12
return (
10
13
<img
11
-
className={`${props.tiny ? "w-4 h-4" : "w-5 h-5"} rounded-full shrink-0 border border-border-light`}
14
+
className={`${props.tiny ? "w-4 h-4" : props.large ? "h-8 w-8" : props.giant ? "h-16 w-16" : "w-5 h-5"} rounded-full shrink-0 border border-border-light ${props.className}`}
12
15
src={props.src}
13
16
alt={
14
17
props.displayName