leaflet.pub
a tool for shared writing and social publishing
small updates to the profile popover styling
cozylittle.house
+61
-20
app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx
+61
-20
app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx
···
15
15
export const ProfileHeader = (props: {
16
16
profile: ProfileViewDetailed;
17
17
publications: { record: Json; uri: string }[];
18
+
popover?: boolean;
18
19
}) => {
19
20
let profileRecord = props.profile;
21
+
const profileUrl = `/p/${props.profile.handle}`;
22
+
23
+
const avatarElement = (
24
+
<Avatar
25
+
src={profileRecord.avatar}
26
+
displayName={profileRecord.displayName}
27
+
className="mx-auto mt-3 sm:mt-4"
28
+
giant
29
+
/>
30
+
);
31
+
32
+
const displayNameElement = (
33
+
<h3 className=" px-3 sm:px-4 pt-2 leading-tight">
34
+
{profileRecord.displayName
35
+
? profileRecord.displayName
36
+
: `@${props.profile.handle}`}
37
+
</h3>
38
+
);
39
+
40
+
const handleElement = profileRecord.displayName && (
41
+
<div
42
+
className={`text-tertiary ${props.popover ? "text-xs" : "text-sm"} pb-1 italic px-3 sm:px-4 truncate`}
43
+
>
44
+
@{props.profile.handle}
45
+
</div>
46
+
);
20
47
21
48
return (
22
-
<div className="flex flex-col relative" id="profile-header">
23
-
<Avatar
24
-
src={profileRecord.avatar}
25
-
displayName={profileRecord.displayName}
26
-
className="mx-auto mt-3 sm:mt-4"
27
-
giant
28
-
/>
49
+
<div
50
+
className={`flex flex-col relative ${props.popover && "text-sm"}`}
51
+
id="profile-header"
52
+
>
29
53
<ProfileLinks handle={props.profile.handle || ""} />
30
54
<div className="flex flex-col">
31
-
<h3 className=" px-3 sm:px-4 pt-2 leading-tight">
32
-
{profileRecord.displayName
33
-
? profileRecord.displayName
34
-
: `@${props.profile.handle}`}
35
-
</h3>
36
-
{profileRecord.displayName && (
37
-
<div className="text-tertiary text-sm pb-1 italic px-3 sm:px-4 truncate">
38
-
@{props.profile.handle}
39
-
</div>
40
-
)}
41
-
<pre className="text-secondary px-3 sm:px-4 ">
55
+
<div className="flex flex-col group">
56
+
{props.popover ? (
57
+
<SpeedyLink className={"hover:no-underline!"} href={profileUrl}>
58
+
{avatarElement}
59
+
</SpeedyLink>
60
+
) : (
61
+
avatarElement
62
+
)}
63
+
{props.popover ? (
64
+
<SpeedyLink
65
+
className={" text-primary group-hover:underline"}
66
+
href={profileUrl}
67
+
>
68
+
{displayNameElement}
69
+
</SpeedyLink>
70
+
) : (
71
+
displayNameElement
72
+
)}
73
+
{props.popover && handleElement ? (
74
+
<SpeedyLink className={"group-hover:underline"} href={profileUrl}>
75
+
{handleElement}
76
+
</SpeedyLink>
77
+
) : (
78
+
handleElement
79
+
)}
80
+
</div>
81
+
<pre className="text-secondary px-3 sm:px-4 whitespace-pre-wrap">
42
82
{profileRecord.description
43
83
? parseDescription(profileRecord.description)
44
84
: null}
45
85
</pre>
46
86
<div className=" w-full overflow-x-scroll mt-3 mb-6 ">
47
-
<div className="grid grid-flow-col auto-cols-[164px] sm:auto-cols-[240px] gap-2 mx-auto w-fit px-3 sm:px-4 ">
48
-
{/*<div className="spacer "/>*/}
87
+
<div
88
+
className={`grid grid-flow-col gap-2 mx-auto w-fit px-3 sm:px-4 ${props.popover ? "auto-cols-[164px]" : "auto-cols-[164px] sm:auto-cols-[240px]"}`}
89
+
>
49
90
{props.publications.map((p) => (
50
91
<PublicationCard
51
92
key={p.uri}
+16
-6
components/ProfilePopover.tsx
+16
-6
components/ProfilePopover.tsx
···
4
4
import { callRPC } from "app/api/rpc/client";
5
5
import { useState } from "react";
6
6
import { ProfileHeader } from "app/(home-pages)/p/[didOrHandle]/ProfileHeader";
7
+
import { SpeedyLink } from "./SpeedyLink";
8
+
import { Tooltip } from "./Tooltip";
7
9
8
10
export const ProfilePopover = (props: {
9
11
trigger: React.ReactNode;
···
22
24
);
23
25
24
26
return (
25
-
<Popover
27
+
<Tooltip
26
28
className="max-w-sm p-0! text-center"
27
29
trigger={props.trigger}
28
30
onOpenChange={setIsOpen}
···
30
32
{isLoading ? (
31
33
<div className="text-secondary p-4">Loading...</div>
32
34
) : data ? (
33
-
<ProfileHeader
34
-
profile={data.profile}
35
-
publications={data.publications}
36
-
/>
35
+
<div>
36
+
<ProfileHeader
37
+
profile={data.profile}
38
+
publications={data.publications}
39
+
popover
40
+
/>
41
+
<hr className="border-border" />
42
+
<div className="py-2 text-sm text-tertiary">
43
+
Followed by{" "}
44
+
<button className="hover:underline">celine and 4 others</button>
45
+
</div>
46
+
</div>
37
47
) : (
38
48
<div className="text-secondary p-4">Profile not found</div>
39
49
)}
40
-
</Popover>
50
+
</Tooltip>
41
51
);
42
52
};