Begin integration of dotnet backend with biergarten nextjs code

Website/src/components/Account/UpdateProfileForm.tsx

@@ -0,0 +1,93 @@
+import FormError from '@/components/ui/forms/FormError';
+import FormInfo from '@/components/ui/forms/FormInfo';
+import FormLabel from '@/components/ui/forms/FormLabel';
+import FormSegment from '@/components/ui/forms/FormSegment';
+import Link from 'next/link';
+import FormTextArea from '@/components/ui/forms/FormTextArea';
+import { FC } from 'react';
+import GetUserSchema from '@/services/users/auth/schema/GetUserSchema';
+import type {
+  UseFormHandleSubmit,
+  SubmitHandler,
+  FieldErrors,
+  UseFormRegister,
+} from 'react-hook-form';
+import { z } from 'zod';
+import UpdateProfileSchema from '@/services/users/auth/schema/UpdateProfileSchema';
+
+type UpdateProfileSchemaT = z.infer<typeof UpdateProfileSchema>;
+
+interface UpdateProfileFormProps {
+  handleSubmit: UseFormHandleSubmit<UpdateProfileSchemaT>;
+  onSubmit: SubmitHandler<UpdateProfileSchemaT>;
+  errors: FieldErrors<UpdateProfileSchemaT>;
+  isSubmitting: boolean;
+  register: UseFormRegister<UpdateProfileSchemaT>;
+  user: z.infer<typeof GetUserSchema>;
+}
+
+const UpdateProfileForm: FC<UpdateProfileFormProps> = ({
+  handleSubmit,
+  onSubmit,
+  errors,
+  isSubmitting,
+  register,
+  user,
+}) => {
+  return (
+    <form className="form-control space-y-1" noValidate onSubmit={handleSubmit(onSubmit)}>
+      <div>
+        <FormInfo>
+          <FormLabel htmlFor="userAvatar">Avatar</FormLabel>
+          <FormError>{errors.userAvatar?.message}</FormError>
+        </FormInfo>
+        <FormSegment>
+          <input
+            disabled={isSubmitting}
+            type="file"
+            id="userAvatar"
+            className="file-input file-input-bordered w-full"
+            {...register('userAvatar')}
+            multiple={false}
+          />
+        </FormSegment>
+      </div>
+      <div>
+        <FormInfo>
+          <FormLabel htmlFor="bio">Bio</FormLabel>
+          <FormError>{errors.bio?.message}</FormError>
+        </FormInfo>
+
+        <FormSegment>
+          <FormTextArea
+            disabled={isSubmitting}
+            id="bio"
+            {...register('bio')}
+            rows={5}
+            formValidationSchema={register('bio')}
+            error={!!errors.bio}
+            placeholder="Bio"
+          />
+        </FormSegment>
+      </div>
+      <div className="mt-6 flex w-full flex-col justify-center space-y-3">
+        <Link
+          className={`btn btn-secondary rounded-xl ${isSubmitting ? 'btn-disabled' : ''}`}
+          href={`/users/${user?.id}`}
+        >
+          Cancel Changes
+        </Link>
+
+        <button
+          className="btn btn-primary w-full rounded-xl"
+          type="submit"
+          disabled={isSubmitting}
+        >
+          Save Changes
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default UpdateProfileForm;