Refactor api requests and components out of pages

components/ui/forms/FormSelect.tsx

@@ -10,6 +10,29 @@ interface FormSelectProps {
   message: string;
 }
 
+/**
+ * @example
+ *   <FormSelect
+ *     options={[
+ *       { value: '1', text: 'One' },
+ *       { value: '2', text: 'Two' },
+ *       { value: '3', text: 'Three' },
+ *     ]}
+ *     id="test"
+ *     formRegister={register('test')}
+ *     error={true}
+ *     placeholder="Test"
+ *     message="Select an option"
+ *   />;
+ *
+ * @param props
+ * @param props.options The options to display in the select.
+ * @param props.id The id of the select.
+ * @param props.formRegister The form register hook from react-hook-form.
+ * @param props.error Whether or not the select has an error.
+ * @param props.placeholder The placeholder text for the select.
+ * @param props.message The message to display when no option is selected.
+ */
 const FormSelect: FunctionComponent<FormSelectProps> = ({
   options,
   id,
@@ -20,7 +43,7 @@ const FormSelect: FunctionComponent<FormSelectProps> = ({
 }) => (
   <select
     id={id}
-    className={`select select-bordered block w-full rounded-lg ${
+    className={`select-bordered select block w-full rounded-lg ${
       error ? 'select-error' : ''
     }`}
     placeholder={placeholder}