nandi.uk
This repository has no description
2.8 kB
96 lines
1'use client';
2
3import {
4 ScrollAreaAutosize,
5 Combobox,
6 useCombobox,
7 Button,
8 Group,
9} from '@mantine/core';
10import Link from 'next/link';
11import { usePathname, useRouter } from 'next/navigation';
12import { BiCollection } from 'react-icons/bi';
13import FeedFilters from '../feedFilters/FeedFilters';
14import { useFeatureFlags } from '@/lib/clientFeatureFlags';
15
16const options = [
17 { value: 'explore', label: 'Latest', href: '/explore' },
18 {
19 value: 'gems-of-2025',
20 label: '💎 Gems of 2025 💎',
21 href: '/explore/gems-of-2025',
22 },
23];
24
25export default function FeedControls() {
26 const pathname = usePathname();
27 const router = useRouter();
28 const { data: featureFlags } = useFeatureFlags();
29
30 const segment = pathname.split('/')[2];
31 const currentValue = segment || 'explore';
32 const isGemsFeed = currentValue === 'gems-of-2025';
33
34 const combobox = useCombobox({
35 onDropdownClose: () => combobox.resetSelectedOption(),
36 });
37
38 const selected = options.find((o) => o.value === currentValue);
39
40 return (
41 <ScrollAreaAutosize type="scroll">
42 <Group gap={'xs'} justify="space-between" wrap="nowrap">
43 <Group gap={'xs'}>
44 <Combobox
45 store={combobox}
46 onOptionSubmit={(value) => {
47 const option = options.find((o) => o.value === value);
48 if (option) {
49 router.push(option.href);
50 }
51 combobox.closeDropdown();
52 }}
53 width={200}
54 >
55 <Combobox.Target>
56 <Button
57 variant="light"
58 color="gray"
59 leftSection={<Combobox.Chevron />}
60 onClick={() => combobox.toggleDropdown()}
61 >
62 {selected?.label || 'Select feed'}
63 </Button>
64 </Combobox.Target>
65
66 <Combobox.Dropdown>
67 <Combobox.Options>
68 {options.map((option) => (
69 <Combobox.Option
70 key={option.value}
71 value={option.value}
72 active={option.value === currentValue}
73 >
74 {option.label}
75 </Combobox.Option>
76 ))}
77 </Combobox.Options>
78 </Combobox.Dropdown>
79 </Combobox>
80 {isGemsFeed && (
81 <Button
82 variant="light"
83 color="grape"
84 component={Link}
85 href={'/explore/gems-of-2025/collections'}
86 leftSection={<BiCollection size={18} />}
87 >
88 Gem Collections
89 </Button>
90 )}
91 </Group>
92 {featureFlags?.urlTypeFilter && <FeedFilters />}
93 </Group>
94 </ScrollAreaAutosize>
95 );
96}