nandi.uk
This repository has no description
2.7 kB
94 lines
1'use client';
2
3import { Group, Badge, Skeleton } from '@mantine/core';
4import { Suspense } from 'react';
5import useFollowersCount from '@/features/follows/lib/queries/useFollowersCount';
6import useFollowingCount from '@/features/follows/lib/queries/useFollowingCount';
7import useFollowingCollectionsCount from '@/features/follows/lib/queries/useFollowingCollectionsCount';
8import FollowButton from '@/features/follows/components/followButton/FollowButton';
9import useMyProfile from '../../lib/queries/useMyProfile';
10import Link from 'next/link';
11
12interface Props {
13 identifier: string; // DID or handle
14 handle: string; // For building links
15 isFollowing?: boolean; // Whether the current user follows this profile
16}
17
18function ProfileStatsContent({ identifier, handle, isFollowing }: Props) {
19 const { data: followersCount } = useFollowersCount({ identifier });
20 const { data: followingCount } = useFollowingCount({ identifier });
21 const { data: followingCollectionsCount } = useFollowingCollectionsCount({
22 identifier,
23 });
24 const { data: myProfile } = useMyProfile();
25
26 const isOwnProfile = myProfile?.id === identifier;
27
28 return (
29 <Group gap="sm">
30 <Badge
31 component={Link}
32 href={`/profile/${handle}/followers`}
33 variant="light"
34 color="gray"
35 size="lg"
36 style={{ cursor: 'pointer' }}
37 >
38 {followersCount.count} Follower{followersCount.count !== 1 ? 's' : ''}
39 </Badge>
40 <Badge
41 component={Link}
42 href={`/profile/${handle}/following`}
43 variant="light"
44 color="gray"
45 size="lg"
46 style={{ cursor: 'pointer' }}
47 >
48 {followingCount.count} Following
49 </Badge>
50 <Badge
51 component={Link}
52 href={`/profile/${handle}/following-collections`}
53 variant="light"
54 color="gray"
55 size="lg"
56 style={{ cursor: 'pointer' }}
57 >
58 {followingCollectionsCount.count} Collection Following
59 </Badge>
60 {!isOwnProfile && (
61 <FollowButton
62 targetId={identifier}
63 targetType="USER"
64 targetHandle={handle}
65 initialIsFollowing={isFollowing}
66 />
67 )}
68 </Group>
69 );
70}
71
72export default function ProfileStats({
73 identifier,
74 handle,
75 isFollowing,
76}: Props) {
77 return (
78 <Suspense
79 fallback={
80 <Group gap="sm">
81 <Skeleton height={28} width={100} radius="sm" />
82 <Skeleton height={28} width={100} radius="sm" />
83 <Skeleton height={28} width={120} radius="sm" />
84 </Group>
85 }
86 >
87 <ProfileStatsContent
88 identifier={identifier}
89 handle={handle}
90 isFollowing={isFollowing}
91 />
92 </Suspense>
93 );
94}