+
+ )
+})
+
+export const FieldSet = React.forwardRef<
+ HTMLFieldSetElement,
+ WrapperProps<"fieldset"> & {
+ required?: boolean
+ disabled?: boolean
+ error?: string | boolean
+ }
+>(function FieldSet(props, ref) {
+ const { children, slotProps, required, disabled, error, ...other } = props
+
+ return (
+
+
+
+ )
+})
diff --git a/assets/js/react/components/FilterModal.tsx b/assets/js/react/components/FilterModal.tsx
new file mode 100644
index 0000000..980f3b3
--- /dev/null
+++ b/assets/js/react/components/FilterModal.tsx
@@ -0,0 +1,138 @@
+import * as React from "react"
+import { Controller, useForm } from "react-hook-form"
+
+import { Button } from "./Button"
+import { Field } from "./FieldSet"
+import { Input } from "./Input"
+import { Label } from "./Label"
+import { Modal } from "./Modal"
+import { Slider } from "./Slider"
+
+import {
+ FIDE_RATING_MIN,
+ FIDE_RATING_MAX,
+ SearchParams,
+} from "../types/SearchParams"
+
+const computeStepLabels = (
+ min: number,
+ max: number,
+ // The number of labels (+ 1) that should be produced.
+ steps: number,
+ // To which value numbers should be rounded to.
+ round: number
+) => {
+ let labels = []
+ const delta = Math.floor((max - min) / steps)
+ for (let i = min; i <= max; i += delta) {
+ if (i % round <= round / 2) {
+ labels.push(i - (i % round))
+ } else {
+ labels.push(i + round - (i % round))
+ }
+ }
+
+ labels[labels.length - 1] = max
+
+ return labels
+}
+
+interface FilterModalProps {
+ open: boolean
+ defaultValues: SearchParams
+ onClose: () => void
+ onSubmit: (p: SearchParams) => void
+}
+
+export function FilterModal({
+ open,
+ defaultValues,
+ onClose,
+ onSubmit,
+}: FilterModalProps) {
+ const idPrefix = React.useId()
+
+ const { watch, reset, control, register, setValue, handleSubmit } =
+ useForm({ defaultValues })
+
+ // Default values are processed immediately despite the modal not being open
+ // at the start. Furthermore, values are preserved after closing and
+ // re-opening the modal, but we want closing the modal to signify canceling.
+ // A simple workaround is to reset everytime we open the modal.
+ React.useEffect(() => reset(defaultValues), [open])
+
+ // Registration
+
+ const controlFIDERating = register("fideRating")
+
+ return (
+
+ Search coaches
+
+ ),
+ onSubmit: handleSubmit(onSubmit),
+ }}
+ >
+
+
+
+
+ Find coaches that have a rating within the specified range. Keep in
+ mind, a higher rating does not necessarily mean a better coach{" "}
+ for you. If you are unsure of this or do not have any
+ preference, leave as is.
+