-
Notifications
You must be signed in to change notification settings - Fork 39
/
submission-filters.js
56 lines (54 loc) · 1.66 KB
/
submission-filters.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import { Card, Input, Select, Text } from "@kleros/components";
import { Search } from "@kleros/icons";
import { useRouter } from "next/router";
import { submissionStatusEnum } from "data";
export default function SubmissionFilters({ numberOfSubmissions }) {
const router = useRouter();
return (
<Card
sx={{ marginBottom: 2 }}
header={
<Text sx={{ maxWidth: 150 }}>
{(numberOfSubmissions || numberOfSubmissions === 0) &&
`${numberOfSubmissions} Profile${
numberOfSubmissions === 1 ? "" : "s"
}`}
</Text>
}
headerSx={{ fontWeight: "bold", justifyContent: "flex-end" }}
mainSx={{ paddingX: 2, paddingY: 1 }}
>
<Input
variant="mutedInput"
aria-label="Search"
placeholder="Search"
icon={<Search />}
value={router.query.search?.replaceAll(" & ", " ") || ""}
onChange={(event) => {
const query = { ...router.query };
if (!event.target.value) delete query.search;
else query.search = event.target.value.replaceAll(" ", " & ");
router.push({
query,
});
}}
/>
<Select
sx={{ width: "240px" }}
items={submissionStatusEnum.array}
onChange={({ kebabCase }) => {
const query = { ...router.query };
if (!kebabCase) delete query.status;
else query.status = kebabCase;
router.push({
query,
});
}}
value={submissionStatusEnum.array.find(
({ kebabCase }) => kebabCase === router.query.status
)}
label="Filter by status:"
/>
</Card>
);
}