nandi.uk
This repository has no description
1.9 kB
66 lines
1'use client';
2
3import { Paper, Scroller, Tabs } from '@mantine/core';
4import TabItem from './TabItem';
5import { usePathname } from 'next/navigation';
6import { useFeatureFlags } from '@/lib/clientFeatureFlags';
7import useProfile from '../../lib/queries/useProfile';
8
9interface Props {
10 handle: string;
11}
12
13export default function ProfileTabs(props: Props) {
14 const pathname = usePathname();
15 const segment = pathname.split('/')[3];
16 const currentTab = segment || 'profile'; // treat base route as 'profile'
17 const basePath = `/profile/${props.handle}`;
18 const { data: featureFlags } = useFeatureFlags();
19 const { data: profile } = useProfile({
20 didOrHandle: props.handle,
21 includeStats: true,
22 });
23
24 return (
25 <Tabs value={currentTab}>
26 <Paper radius={0}>
27 <Tabs.List style={{ flexWrap: 'nowrap' }}>
28 <Scroller>
29 <TabItem value="profile" href={basePath}>
30 Profile
31 </TabItem>
32 <TabItem
33 value="cards"
34 href={`${basePath}/cards`}
35 count={profile?.urlCardCount}
36 >
37 Cards
38 </TabItem>
39 <TabItem
40 value="collections"
41 href={`${basePath}/collections`}
42 count={profile?.collectionCount}
43 >
44 Collections
45 </TabItem>
46 <TabItem
47 value="connections"
48 href={`${basePath}/connections`}
49 count={profile?.connectionCount}
50 >
51 Connections
52 </TabItem>
53 <TabItem value="network" href={`${basePath}/network`}>
54 Network
55 </TabItem>
56 {featureFlags?.graphView && (
57 <TabItem value="graph" href={`${basePath}/graph`}>
58 Graph
59 </TabItem>
60 )}
61 </Scroller>
62 </Tabs.List>
63 </Paper>
64 </Tabs>
65 );
66}