feat: create edit collection page

inertia/components/common/form/textbox.tsx

@@ -1,12 +1,20 @@
+import styled from '@emotion/styled';
 import { ChangeEvent, InputHTMLAttributes, useState } from 'react';
 import FormField from '~/components/common/form/_form_field';
 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;
   name: string;
   value?: string;
+  errors?: string[];
   onChange?: (name: string, value: string) => void;
 }
 
@@ -14,6 +22,7 @@ export default function TextBox({
   name,
   label,
   value = '',
+  errors = [],
   onChange,
   required = false,
   ...props
@@ -39,6 +48,8 @@ export default function TextBox({
         value={inputValue}
         placeholder={props.placeholder ?? 'Type something...'}
       />
+      {errors.length > 0 &&
+        errors.map((error) => <InputLegend>{error}</InputLegend>)}
     </FormField>
   );
 }