added title in add aboutus

frontend/src/components/AboutUs/AddAboutUs.tsx

@@ -1,4 +1,4 @@
-import  { useState } from 'react';
+import { useState } from 'react';
 import {
   Button,
   FormControl,
@@ -16,6 +16,7 @@ import {
   NumberInputStepper,
   NumberIncrementStepper,
   NumberDecrementStepper,
+  Input,
 } from "@chakra-ui/react"
 
 import { useMutation, useQueryClient } from "@tanstack/react-query"
@@ -82,6 +83,7 @@ const AddAboutUs = ({ isOpen, onClose }: AddAboutUsProps) => {
     criteriaMode: "all",
     defaultValues: {
       index: 0,
+      title: "",
       description: "",
       image: undefined,
     },
@@ -131,7 +133,7 @@ const AddAboutUs = ({ isOpen, onClose }: AddAboutUsProps) => {
     }
     mutation.mutate(data)
     console.log(data)
-    
+
   }
 
 
@@ -149,6 +151,20 @@ const AddAboutUs = ({ isOpen, onClose }: AddAboutUsProps) => {
           <ModalCloseButton />
 
           <ModalBody pb={30}>
+            <FormControl isRequired isInvalid={!!errors.title}>
+              <FormLabel htmlFor="title">Title</FormLabel>
+              <Input
+                id="title"
+                {...register("title", {
+                  required: "Title is required.",
+                })}
+                placeholder="Title"
+                type="text"
+              />
+              {errors.title && (
+                <FormErrorMessage>{errors.title.message}</FormErrorMessage>
+              )}
+            </FormControl>
             <FormControl isRequired isInvalid={!!errors.description}>
               <Editor
                 editorState={editorState}
@@ -183,7 +199,7 @@ const AddAboutUs = ({ isOpen, onClose }: AddAboutUsProps) => {
                   <NumberDecrementStepper />
                 </NumberInputStepper>
               </NumberInput>
-             
+
               {errors.index && (
                 <FormErrorMessage>{errors.index.message}</FormErrorMessage>
               )}
@@ -192,7 +208,7 @@ const AddAboutUs = ({ isOpen, onClose }: AddAboutUsProps) => {
             <FormControl isInvalid={!!errors.image} isRequired>
               <FormLabel>{'Image Upload'}</FormLabel>
 
-          
+
               <input type="file" {...register("image", {
                 required: "index is required.",
               })} />