isuggest.selfce.st
alternative tangled frontend (extremely wip)
feat: bsky icon, profile info
+23
src/components/Icons/Branding/TablerBrandBluesky.tsx
+23
src/components/Icons/Branding/TablerBrandBluesky.tsx
···
1
+
import { SVGProps } from "react";
2
+
3
+
export function TablerBrandBluesky(props: SVGProps<SVGSVGElement>) {
4
+
return (
5
+
<svg
6
+
xmlns="http://www.w3.org/2000/svg"
7
+
width="1em"
8
+
height="1em"
9
+
viewBox="0 0 24 24"
10
+
{...props}
11
+
>
12
+
{/* Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE */}
13
+
<path
14
+
fill="none"
15
+
stroke="currentColor"
16
+
strokeLinecap="round"
17
+
strokeLinejoin="round"
18
+
strokeWidth="2"
19
+
d="M6.335 5.144C4.681 3.945 2 3.017 2 5.97c0 .59.35 4.953.556 5.661C3.269 14.094 5.686 14.381 8 14c-4.045.665-4.889 3.208-2.667 5.41C6.363 20.428 7.246 21 8 21c2 0 3.134-2.769 3.5-3.5q.5-1 .5-1.5q0 .5.5 1.5c.366.731 1.5 3.5 3.5 3.5c.754 0 1.637-.571 2.667-1.59C20.889 17.207 20.045 14.664 16 14c2.314.38 4.73.094 5.444-2.369c.206-.708.556-5.072.556-5.661c0-2.953-2.68-2.025-4.335-.826C15.372 6.806 12.905 10.192 12 12c-.905-1.808-3.372-5.194-5.665-6.856"
20
+
/>
21
+
</svg>
22
+
);
23
+
}
+102
-6
src/components/Profile/ProfileOverview.tsx
+102
-6
src/components/Profile/ProfileOverview.tsx
···
1
+
import { UnderlineLink } from "@/components/Animated/UnderlinedLink";
2
+
import { TablerBrandBluesky } from "@/components/Icons/Branding/TablerBrandBluesky";
1
3
import { Loading } from "@/components/Icons/Loading";
2
4
import { Avatar } from "@/components/Profile/Avatar";
3
5
import { useAvatarQuery } from "@/lib/queries/get-avatar";
4
6
import { useProfileQuery } from "@/lib/queries/get-profile";
5
7
import { useReposQuery } from "@/lib/queries/get-repos";
6
8
import { useMiniDoc } from "@/lib/queries/resolve-minidoc";
9
+
import { LucideDot, LucideLink, LucideMapPin, LucideUsers } from "lucide-react";
7
10
import { useState } from "react";
8
11
9
12
export const ProfileOverview = ({ identifier }: { identifier: string }) => {
···
55
58
if (err) return <p>{err.message}</p>;
56
59
57
60
const avatarUri = avatarQueryData;
58
-
const {} = profileQueryData
61
+
const { handle } = miniDocQueryData;
62
+
const { pronouns, description, bluesky, location, links } =
63
+
profileQueryData;
59
64
60
65
return (
61
-
<div className="bg-surface0 flex w-fit flex-col pt-8">
62
-
<Avatar
63
-
uri={avatarUri}
64
-
className="outline-overlay0 h-48 rounded-full outline"
65
-
/>
66
+
<div className="bg-surface0 flex w-256 justify-between gap-2 pt-8">
67
+
<div className="flex flex-col gap-4">
68
+
<Avatar
69
+
uri={avatarUri}
70
+
className="outline-overlay0 max-w-52 rounded-full outline"
71
+
/>
72
+
<div>
73
+
<h2 className="flex h-fit items-center pt-2 text-lg font-semibold">
74
+
@{handle}
75
+
{pronouns && (
76
+
<>
77
+
<span>
78
+
<LucideDot
79
+
height={12}
80
+
width={16}
81
+
className="text-subtext"
82
+
/>
83
+
</span>
84
+
<span className="text-subtext font-normal">
85
+
{pronouns}
86
+
</span>
87
+
</>
88
+
)}
89
+
</h2>
90
+
{description && <p>{description}</p>}
91
+
</div>
92
+
<div>
93
+
<div className="flex items-center gap-1">
94
+
<LucideUsers
95
+
height={16}
96
+
width={16}
97
+
className="text-subtext"
98
+
/>
99
+
<p>
100
+
100 <span className="text-subtext">followers</span>
101
+
</p>
102
+
<LucideDot
103
+
height={12}
104
+
width={12}
105
+
className="text-subtext"
106
+
/>
107
+
<p>
108
+
100 <span className="text-subtext">following</span>
109
+
</p>
110
+
</div>
111
+
</div>
112
+
<div className="flex flex-col gap-1">
113
+
{location && (
114
+
<div className="flex items-center gap-1">
115
+
<LucideMapPin
116
+
height={16}
117
+
width={16}
118
+
className="text-subtext"
119
+
/>
120
+
<p>{location}</p>
121
+
</div>
122
+
)}
123
+
{bluesky && (
124
+
<div className="flex items-center gap-1">
125
+
<TablerBrandBluesky
126
+
height={16}
127
+
width={16}
128
+
className="text-subtext"
129
+
/>
130
+
<UnderlineLink
131
+
underlineColor="bg-text"
132
+
className="text-text"
133
+
href={`https://catsky.social/profile/${handle}`}
134
+
>
135
+
{handle}
136
+
</UnderlineLink>
137
+
</div>
138
+
)}
139
+
{links &&
140
+
links.map((link) => {
141
+
if (link === "") return <></>;
142
+
return (
143
+
<div className="flex items-center gap-1">
144
+
<LucideLink
145
+
height={16}
146
+
width={16}
147
+
className="text-subtext"
148
+
/>
149
+
<UnderlineLink
150
+
underlineColor="bg-text"
151
+
className="text-text"
152
+
href={link}
153
+
>
154
+
{link}
155
+
</UnderlineLink>
156
+
</div>
157
+
);
158
+
})}
159
+
</div>
160
+
</div>
161
+
<div></div>
66
162
</div>
67
163
);
68
164
};
+1
-1
src/routes/_layout/$identifier/index.tsx
+1
-1
src/routes/_layout/$identifier/index.tsx
···
69
69
labelClassName={`text-text ${isCurrent ? "font-semibold" : ""}`}
70
70
iconClassName="text-text mr-0.5"
71
71
iconVariants={{}}
72
-
className={`hover:bg-surface1 rounded-t-sm pt-2 pb-1.5 px-3 transition-all ${isCurrent ? "bg-surface0" : ""}`}
72
+
className={`hover:bg-surface1 rounded-t-sm px-3 pt-2 pb-1.5 transition-all ${isCurrent ? "bg-surface0" : ""}`}
73
73
/>
74
74
))}
75
75
</div>