SortDropdown.tsx61 lines · main

1	import { ArrowDownNarrowWide, ArrowDownWideNarrow } from 'lucide-react'
2	import {
3	Button,
4	DropdownMenu,
5	DropdownMenuContent,
6	DropdownMenuRadioGroup,
7	DropdownMenuRadioItem,
8	DropdownMenuSub,
9	DropdownMenuSubContent,
10	DropdownMenuSubTrigger,
11	DropdownMenuTrigger,
12	} from 'ui'
13
14	type SortOption = {
15	label: string
16	value: string
17	}
18
19	interface SortDropdownProps {
20	options: SortOption[]
21	value: string
22	setValue: (value: string) => void
23	}
24
25	export const SortDropdown = ({ options, value, setValue }: SortDropdownProps) => {
26	const [sortColumn, sortOrder] = value.split('_')
27	const columnLabel = options.find((x) => x.value === sortColumn)?.label
28
29	return (
30	<DropdownMenu>
31	<DropdownMenuTrigger asChild>
32	<Button
33	type="default"
34	icon={sortOrder === 'desc' ? <ArrowDownWideNarrow /> : <ArrowDownNarrowWide />}
35	>
36	Sorted by {columnLabel ?? sortColumn}
37	</Button>
38	</DropdownMenuTrigger>
39
40	<DropdownMenuContent className="w-44" align="start">
41	<DropdownMenuRadioGroup value={value} onValueChange={setValue}>
42	{options.map((option) => {
43	return (
44	<DropdownMenuSub key={option.value}>
45	<DropdownMenuSubTrigger>Sort by {option.label}</DropdownMenuSubTrigger>
46	<DropdownMenuSubContent>
47	<DropdownMenuRadioItem value={`${option.value}_asc`}>
48	Ascending
49	</DropdownMenuRadioItem>
50	<DropdownMenuRadioItem value={`${option.value}_desc`}>
51	Descending
52	</DropdownMenuRadioItem>
53	</DropdownMenuSubContent>
54	</DropdownMenuSub>
55	)
56	})}
57	</DropdownMenuRadioGroup>
58	</DropdownMenuContent>
59	</DropdownMenu>
60	)
61	}