From dadc2cec38b5dc8cd31557a96730dc840d769e76 Mon Sep 17 00:00:00 2001
From: Philip Cheung <philip.cheung@nirons.com>
Date: Mon, 7 Oct 2024 20:07:54 +0800
Subject: [PATCH] added title in add aboutus

---
 .../src/components/AboutUs/AddAboutUs.tsx     | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/AboutUs/AddAboutUs.tsx b/frontend/src/components/AboutUs/AddAboutUs.tsx
index 199bc48..700bb19 100644
--- a/frontend/src/components/AboutUs/AddAboutUs.tsx
+++ b/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.",
               })} />