leaflet.pub
a tool for shared writing and social publishing
add publications
awarm.space
+52
-5
+47
-4
app/p/[didOrHandle]/ProfilePageLayout.tsx
+47
-4
app/p/[didOrHandle]/ProfilePageLayout.tsx
···
6
6
import { Json } from "supabase/database.types";
7
7
import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
8
8
import { Avatar } from "components/Avatar";
9
-
import { AppBskyActorProfile } from "lexicons/api";
9
+
import { AppBskyActorProfile, PubLeafletPublication } from "lexicons/api";
10
10
import { blobRefToSrc } from "src/utils/blobRefToSrc";
11
+
import { PubIcon } from "components/ActionBar/Publications";
12
+
import { usePubTheme } from "components/ThemeManager/PublicationThemeProvider";
13
+
import { colorToString } from "components/ThemeManager/useColorAttribute";
11
14
12
15
export const ProfilePageLayout = (props: {
16
+
publications: { record: Json; uri: string }[];
13
17
profile: {
14
18
did: string;
15
19
handle: string | null;
···
29
33
defaultTab="home"
30
34
tabs={{
31
35
home: {
32
-
content: <ProfilePageContent profile={props.profile} />,
36
+
content: (
37
+
<ProfilePageContent
38
+
profile={props.profile}
39
+
publications={props.publications}
40
+
/>
41
+
),
33
42
controls: null,
34
43
},
35
44
}}
···
41
50
42
51
export type profileTabsType = "posts" | "comments" | "subscriptions";
43
52
const ProfilePageContent = (props: {
53
+
publications: { record: Json; uri: string }[];
44
54
profile: {
45
55
did: string;
46
56
handle: string | null;
···
83
93
)}
84
94
<div className="text-secondary">{profileRecord.description}</div>
85
95
<div className="flex flex-row gap-2 mx-auto my-3">
86
-
<div>pub 1</div>
87
-
<div>pub 2</div>
96
+
{props.publications.map((p) => (
97
+
<PublicationCard
98
+
key={p.uri}
99
+
record={p.record as PubLeafletPublication.Record}
100
+
uri={p.uri}
101
+
/>
102
+
))}
88
103
</div>
89
104
<ProfileTabs tab={tab} setTab={setTab} />
90
105
<TabContent tab={tab} />
···
95
110
const PubListingCompact = () => {
96
111
return <div></div>;
97
112
};
113
+
114
+
const PublicationCard = (props: {
115
+
record: PubLeafletPublication.Record;
116
+
uri: string;
117
+
}) => {
118
+
const { record, uri } = props;
119
+
const { bgLeaflet, bgPage } = usePubTheme(record.theme);
120
+
121
+
return (
122
+
<a
123
+
href={`https://${record.base_path}`}
124
+
className="border border-border p-2 rounded-lg hover:no-underline!"
125
+
style={{ backgroundColor: `rgb(${colorToString(bgLeaflet, "rgb")})` }}
126
+
>
127
+
<div
128
+
className="rounded-md p-2 flex flex-row gap-2"
129
+
style={{
130
+
backgroundColor: record.theme?.showPageBackground
131
+
? `rgb(${colorToString(bgPage, "rgb")})`
132
+
: undefined,
133
+
}}
134
+
>
135
+
<PubIcon record={record} uri={uri} />
136
+
<h4>{record.name}</h4>
137
+
</div>
138
+
</a>
139
+
);
140
+
};
+5
-1
app/p/[didOrHandle]/page.tsx
+5
-1
app/p/[didOrHandle]/page.tsx
···
31
31
.select(`*`)
32
32
.eq("did", did)
33
33
.single();
34
+
let { data: pubs } = await supabaseServerClient
35
+
.from("publications")
36
+
.select("*")
37
+
.eq("identity_did", did);
34
38
35
-
return <ProfilePageLayout profile={profile} />;
39
+
return <ProfilePageLayout profile={profile} publications={pubs || []} />;
36
40
}