fix: convert form checkicon to checkbox

src/components/Form/AddPoiForm.tsx

@@ -5,9 +5,9 @@ import fetcher from '../../util/fetcher';
 import TextInput from './TextInput';
 import FileInput from './FileInput';
 import TextAreaInput from './TextAreaInput';
-import { CheckCircleOutline as CheckIcon } from 'heroicons-react';
 import { useStore } from '../../hooks';
 import { useHistory } from 'react-router-dom';
+import CheckboxInput from './CheckboxInput';
 
 interface Props {}
 
@@ -115,11 +115,7 @@ const AddPoiForm: React.FC<Props> = () => {
 
   return (
     <form className="flex flex-col" onSubmit={handleSubmit} ref={formRef}>
-      <p className="flex items-center leading-relaxed mb-5 text-gray-600">
-        <CheckIcon className={`${draftPoi ? 'text-indigo-500' : 'text-gray-400'} mr-2`} />
-        Bitte einen Pin auf der Karte setzen.
-      </p>
-
+      <CheckboxInput name="draft" label={'Bitte einen Pin auf der Karte setzen.'} value={Boolean(draftPoi)} required />
       <TextInput label={'Name des Orts'} name={'name'} value={formData.name} onChange={handleInputChange} required />
       <TextInput
         label={'Kategorie'}

src/components/Form/CheckboxInput.tsx

+import React from 'react';
+import { CheckCircleOutline as CheckIcon } from 'heroicons-react';
+
+interface Props {
+  label: string;
+  value: boolean;
+  name: string;
+  required?: boolean;
+}
+
+const CheckboxInput: React.FC<Props> = ({ name, label, value, ...inputProps }) => {
+  return (
+    <label className="flex mb-4 items-center">
+      <CheckIcon className={`${value ? 'text-indigo-500' : 'text-gray-400'} mr-2`} />
+      <input readOnly type="checkbox" name={name} value={name} className="hidden" checked={value} {...inputProps} />
+      {!!label && <span className="form-label">{label}</span>}
+    </label>
+  );
+};
+
+export default CheckboxInput;