nandi.uk
This repository has no description
feat: replace network segmented control with buttons
author
pdelfan
date
(May 4, 2026, 8:08 PM -0700)
commit
1637a66b
1637a66b32c7df27dc851a43f78979d690081308
parent
fc55a375
fc55a375c0bf5a0cfb4b4fad5183f97011a77380
+31
-17
+31
-17
src/webapp/features/follows/components/networkTabs/NetworkTabs.tsx
+31
-17
src/webapp/features/follows/components/networkTabs/NetworkTabs.tsx
···
1
1
'use client';
2
2
3
3
import { useRouter, usePathname, useParams } from 'next/navigation';
4
-
import { SegmentedControl } from '@mantine/core';
4
+
import { Button, Group, ScrollArea, Scroller } from '@mantine/core';
5
+
6
+
const tabs = [
7
+
{ label: 'Followers', value: 'followers' },
8
+
{ label: 'Following', value: 'following' },
9
+
{ label: 'Collections Following', value: 'collections-following' },
10
+
{ label: 'Contributed To', value: 'contributed-to' },
11
+
];
5
12
6
13
export default function NetworkTabs() {
7
14
const router = useRouter();
···
22
29
return 'followers';
23
30
};
24
31
32
+
const currentValue = getCurrentValue();
33
+
25
34
return (
26
-
<SegmentedControl
27
-
value={getCurrentValue()}
28
-
onChange={(value) => {
29
-
if (value === 'followers') {
30
-
router.push(basePath);
31
-
} else {
32
-
router.push(`${basePath}/${value}`);
33
-
}
34
-
}}
35
-
data={[
36
-
{ label: 'Followers', value: 'followers' },
37
-
{ label: 'Following', value: 'following' },
38
-
{ label: 'Collections Following', value: 'collections-following' },
39
-
{ label: 'Contributed To', value: 'contributed-to' },
40
-
]}
41
-
/>
35
+
<Scroller>
36
+
<Group gap="xs" wrap="nowrap">
37
+
{tabs.map((tab) => (
38
+
<Button
39
+
key={tab.value}
40
+
size="xs"
41
+
color="gray"
42
+
variant={currentValue === tab.value ? 'filled' : 'light'}
43
+
onClick={() => {
44
+
if (tab.value === 'followers') {
45
+
router.push(basePath);
46
+
} else {
47
+
router.push(`${basePath}/${tab.value}`);
48
+
}
49
+
}}
50
+
>
51
+
{tab.label}
52
+
</Button>
53
+
))}
54
+
</Group>
55
+
</Scroller>
42
56
);
43
57
}