EdgeFunctionsSortDropdown.tsx88 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	export const EDGE_FUNCTIONS_SORT_VALUES = [
15	'name:asc',
16	'name:desc',
17	'created_at:asc',
18	'created_at:desc',
19	'updated_at:asc',
20	'updated_at:desc',
21	] as const
22
23	export type EdgeFunctionsSort = (typeof EDGE_FUNCTIONS_SORT_VALUES)[number]
24	export type EdgeFunctionsSortColumn = EdgeFunctionsSort extends `${infer Column}:${string}`
25	? Column
26	: unknown
27	export type EdgeFunctionsSortOrder = EdgeFunctionsSort extends `${string}:${infer Order}`
28	? Order
29	: unknown
30
31	interface EdgeFunctionsSortDropdownProps {
32	value: EdgeFunctionsSort
33	onChange: (value: EdgeFunctionsSort) => void
34	}
35
36	function getSortLabel(value: EdgeFunctionsSort) {
37	const [sortCol] = value.split(':')
38	return sortCol.replace('_', ' ')
39	}
40
41	export const EdgeFunctionsSortDropdown = ({ value, onChange }: EdgeFunctionsSortDropdownProps) => {
42	return (
43	<DropdownMenu>
44	<DropdownMenuTrigger asChild>
45	<Button
46	type="default"
47	icon={
48	value.includes('desc') ? (
49	<ArrowDownWideNarrow size={14} />
50	) : (
51	<ArrowDownNarrowWide size={14} />
52	)
53	}
54	>
55	Sorted by {getSortLabel(value)}
56	</Button>
57	</DropdownMenuTrigger>
58	<DropdownMenuContent align="start" className="w-48">
59	<DropdownMenuRadioGroup
60	value={value}
61	onValueChange={(val) => onChange(val as EdgeFunctionsSort)}
62	>
63	<DropdownMenuSub>
64	<DropdownMenuSubTrigger>Sort by name</DropdownMenuSubTrigger>
65	<DropdownMenuSubContent>
66	<DropdownMenuRadioItem value="name:asc">Ascending</DropdownMenuRadioItem>
67	<DropdownMenuRadioItem value="name:desc">Descending</DropdownMenuRadioItem>
68	</DropdownMenuSubContent>
69	</DropdownMenuSub>
70	<DropdownMenuSub>
71	<DropdownMenuSubTrigger>Sort by created at</DropdownMenuSubTrigger>
72	<DropdownMenuSubContent>
73	<DropdownMenuRadioItem value="created_at:asc">Ascending</DropdownMenuRadioItem>
74	<DropdownMenuRadioItem value="created_at:desc">Descending</DropdownMenuRadioItem>
75	</DropdownMenuSubContent>
76	</DropdownMenuSub>
77	<DropdownMenuSub>
78	<DropdownMenuSubTrigger>Sort by updated at</DropdownMenuSubTrigger>
79	<DropdownMenuSubContent>
80	<DropdownMenuRadioItem value="updated_at:asc">Ascending</DropdownMenuRadioItem>
81	<DropdownMenuRadioItem value="updated_at:desc">Descending</DropdownMenuRadioItem>
82	</DropdownMenuSubContent>
83	</DropdownMenuSub>
84	</DropdownMenuRadioGroup>
85	</DropdownMenuContent>
86	</DropdownMenu>
87	)
88	}