feat: add create/edit link form + controller methods

inertia/components/common/form/checkbox.tsx

@@ -0,0 +1,55 @@
+import { ChangeEvent, Fragment, InputHTMLAttributes, useState } from 'react';
+import Toggle from 'react-toggle';
+import FormField from '~/components/common/form/_form_field';
+import FormFieldError from '~/components/common/form/_form_field_error';
+
+interface InputProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+  label: string;
+  name: string;
+  checked: boolean;
+  errors?: string[];
+  onChange?: (name: string, checked: boolean) => void;
+}
+
+export default function Checkbox({
+  name,
+  label,
+  checked = false,
+  errors = [],
+  onChange,
+  required = false,
+  ...props
+}: InputProps): JSX.Element {
+  const [checkboxChecked, setCheckboxChecked] = useState<boolean>(checked);
+
+  if (typeof window === 'undefined') return <Fragment />;
+
+  function _onChange({ target }: ChangeEvent<HTMLInputElement>) {
+    setCheckboxChecked(target.checked);
+    if (onChange) {
+      onChange(target.name, target.checked);
+    }
+  }
+
+  return (
+    <FormField
+      css={{ alignItems: 'center', gap: '1em', flexDirection: 'row' }}
+      required={required}
+    >
+      <label htmlFor={name} title={label}>
+        {label}
+      </label>
+      <Toggle
+        {...props}
+        onChange={_onChange}
+        checked={checkboxChecked}
+        placeholder={props.placeholder ?? 'Type something...'}
+        name={name}
+        id={name}
+      />
+      {errors.length > 0 &&
+        errors.map((error) => <FormFieldError>{error}</FormFieldError>)}
+    </FormField>
+  );
+}