Feat: add create brewery post, brewery image upload

Add address autocomplete, using MapBox

src/components/CreateBeerPostForm.tsx

@@ -34,15 +34,15 @@ const CreateBeerPostForm: FunctionComponent<BeerFormProps> = ({
   types = [],
   brewery,
 }) => {
-  const { register, handleSubmit, formState } = useForm<
-    z.infer<typeof CreateBeerPostWithImagesValidationSchema>
-  >({
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<z.infer<typeof CreateBeerPostWithImagesValidationSchema>>({
     resolver: zodResolver(CreateBeerPostWithImagesValidationSchema),
     defaultValues: { breweryId: brewery.id },
   });
 
-  const { errors, isSubmitting } = formState;
-
   const onSubmit: SubmitHandler<
     z.infer<typeof CreateBeerPostWithImagesValidationSchema>
   > = async (data) => {
@@ -51,9 +51,9 @@ const CreateBeerPostForm: FunctionComponent<BeerFormProps> = ({
     }
 
     try {
-      const response = await sendCreateBeerPostRequest(data);
-      await sendUploadBeerImagesRequest({ beerPost: response, images: data.images });
-      await router.push(`/beers/${response.id}`);
+      const beerPost = await sendCreateBeerPostRequest(data);
+      await sendUploadBeerImagesRequest({ beerPost, images: data.images });
+      await router.push(`/beers/${beerPost.id}`);
       toast.success('Created beer post.');
     } catch (e) {
       const errorMessage = e instanceof Error ? e.message : 'Something went wrong.';

src/components/ui/CustomToast.tsx

@@ -22,14 +22,19 @@ const toastToClassName = (toastType: Toast['type']) => {
 const CustomToast: FC<{ children: ReactNode }> = ({ children }) => {
   return (
     <>
-      <Toaster position="bottom-right">
+      <Toaster
+        position="bottom-right"
+        toastOptions={{
+          duration: 2500,
+        }}
+      >
         {(t) => {
           const alertType = toastToClassName(t.type);
           return (
             <div
-              className={`alert ${alertType} flex w-full items-center justify-between shadow-lg animate-in fade-in duration-200 lg:w-3/12`}
+              className={`alert ${alertType} flex w-full items-start justify-between shadow-lg animate-in fade-in duration-200 lg:w-3/12`}
             >
-              <p className="w-full">{resolveValue(t.message, t)}</p>
+              <p className="w-full text-left">{resolveValue(t.message, t)}</p>
               {t.type !== 'loading' && (
                 <div>
                   <button

src/components/ui/forms/FormPageLayout.tsx

@@ -20,7 +20,7 @@ const FormPageLayout: FC<FormPageLayoutProps> = ({
 }) => {
   return (
     <div className="my-20 flex flex-col items-center justify-center">
-      <div className="w-10/12 lg:w-8/12 2xl:w-6/12">
+      <div className="w-11/12 lg:w-9/12 2xl:w-7/12">
         <div className="tooltip tooltip-right" data-tip={backLinkText}>
           <Link href={backLink} className="btn-ghost btn-sm btn p-0">
             <BiArrowBack className="text-xl" />

src/components/ui/forms/FormTextInput.tsx

@@ -11,6 +11,7 @@ interface FormInputProps {
   id: string;
   height?: string;
   disabled?: boolean;
+  autoComplete?: string;
 }
 
 /**
@@ -33,6 +34,7 @@ interface FormInputProps {
  * @param param0.id The id of the input.
  * @param param0.height The height of the input.
  * @param param0.disabled Whether or not the input is disabled.
+ * @param param0.autoComplete The autocomplete value for the input.
  */
 const FormTextInput: FunctionComponent<FormInputProps> = ({
   placeholder = '',