nandi.uk
This repository has no description
1.5 kB
48 lines
1'use client';
2
3import { Group, Paper, Scroller, Tabs } from '@mantine/core';
4import { usePathname } from 'next/navigation';
5import TabItem from './TabItem';
6import ContributorTab from './ContributorTab';
7
8interface Props {
9 handle: string;
10 rkey: string;
11}
12
13export default function CollectionTabs(props: Props) {
14 const pathname = usePathname();
15 const segment = pathname.split('/')[5]; // Index 5 is the segment after rkey
16 const currentTab = segment || 'cards'; // treat base route as 'cards'
17 const basePath = `/profile/${props.handle}/collections/${props.rkey}`;
18
19 return (
20 <Tabs value={currentTab}>
21 <Paper radius={0}>
22 <Tabs.List>
23 <Scroller>
24 <Group wrap="nowrap">
25 <TabItem value="cards" href={basePath}>
26 Cards
27 </TabItem>
28 <TabItem value="similar-cards" href={`${basePath}/similar-cards`}>
29 Similar cards
30 </TabItem>
31 <TabItem value="mentions" href={`${basePath}/mentions`}>
32 Mentions
33 </TabItem>
34 <TabItem value="followers" href={`${basePath}/followers`}>
35 Followers
36 </TabItem>
37 <ContributorTab
38 handle={props.handle}
39 rkey={props.rkey}
40 basePath={basePath}
41 />
42 </Group>
43 </Scroller>
44 </Tabs.List>
45 </Paper>
46 </Tabs>
47 );
48}