feat: add create/edit link form + controller methods

inertia/components/common/form/_button.tsx

@@ -14,7 +14,7 @@ const Button = styled.button(({ theme }) => ({
 
   '&:disabled': {
     cursor: 'not-allowed',
-    opacity: '0.75',
+    opacity: '0.5',
   },
 
   '&:not(:disabled):hover': {

inertia/components/common/form/_form.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 const Form = styled.form({
   width: '100%',
   display: 'flex',
-  gap: '0.5em',
+  gap: '1em',
   flexDirection: 'column',
 });
 

inertia/components/common/form/_form_field_error.tsx

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+// TODO: create a global style variable (fontSize)
+const FormFieldError = styled.p(({ theme }) => ({
+  fontSize: '12px',
+  color: theme.colors.lightRed,
+}));
+
+export default FormFieldError;

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>
+  );
+}

inertia/components/common/form/textbox.tsx

@@ -1,14 +1,8 @@
-import styled from '@emotion/styled';
 import { ChangeEvent, InputHTMLAttributes, useState } from 'react';
 import FormField from '~/components/common/form/_form_field';
+import FormFieldError from '~/components/common/form/_form_field_error';
 import Input from '~/components/common/form/_input';
 
-// TODO: create a global style variable (fontSize)
-const InputLegend = styled.p(({ theme }) => ({
-  fontSize: '12px',
-  color: theme.colors.lightRed,
-}));
-
 interface InputProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
   label: string;
@@ -49,7 +43,7 @@ export default function TextBox({
         placeholder={props.placeholder ?? 'Type something...'}
       />
       {errors.length > 0 &&
-        errors.map((error) => <InputLegend>{error}</InputLegend>)}
+        errors.map((error) => <FormFieldError>{error}</FormFieldError>)}
     </FormField>
   );
 }

inertia/components/common/modal/_modal_container.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
+import TransitionLayout from '~/components/layouts/_transition_layout';
 
-const ModalContainer = styled.div(({ theme }) => ({
+const ModalContainer = styled(TransitionLayout)(({ theme }) => ({
   minWidth: '500px',
   background: theme.colors.secondary,
   padding: '1em',

inertia/components/common/modal/_modal_wrapper.tsx

@@ -13,6 +13,7 @@ const ModalWrapper = styled.div(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   flexDirection: 'column',
+  transition: theme.transition.delay,
 }));
 
 export default ModalWrapper;