My app

src/Components/AddMemory/index.tsx

@@ -0,0 +1,182 @@
+import { FC } from 'react'
+import { useFormik } from 'formik'
+import { Box, Grid, Flex, GridItem } from '@chakra-ui/react'
+import { FilledButton } from 'Components/Buttons'
+import { Input, TextArea } from 'Components/Forms'
+import { Views } from 'Views/Memories'
+import useAuth from 'Utils/Providers/AuthContextProvider'
+
+import { authStore } from 'Stores/auth.store'
+
+const AddMemory: FC<{ isAdd?: boolean; toggle?: (e: Views) => void }> = ({
+  isAdd,
+  toggle
+}) => {
+  const { isLoading, login } = useAuth()
+
+  const user = authStore(state => state.user)
+
+  interface IUser {
+    avatar: any
+    email: string
+    firstName: string
+    lastName: string
+    password?: string
+    phoneNumber: string
+    gender?: string
+    address?: string
+    occupation?: string
+    dob?: string
+    race?: string
+    country?: string
+    tribe?: string
+    religion?: string
+  }
+
+  interface IMemory {
+    name: string
+    location: string
+    date: string
+    member: string
+    file: string
+    note: ''
+  }
+
+  const formik = useFormik<IMemory>({
+    initialValues: {
+      name: '',
+      location: '',
+      date: '',
+      member: '',
+      file: '',
+      note: ''
+    },
+    onSubmit: async values => {
+      //   await login(values)
+    }
+  })
+
+  return (
+    <form onSubmit={formik.handleSubmit}>
+      <Grid rowGap={10} columnGap={10} templateColumns={{ xl: '50% 50%' }}>
+        <GridItem
+          as={Input}
+          required
+          type="text"
+          id="name"
+          label="Memory Name"
+          onBlur={formik.handleBlur}
+          placeholder=""
+          value={formik.values.name}
+          error={formik.errors.name}
+          touched={formik.touched.name}
+          onChange={formik.handleChange}
+          setFieldTouched={formik.setFieldTouched}
+        />
+
+        <GridItem
+          as={Input}
+          required
+          type="text"
+          id="location"
+          label="Location"
+          onBlur={formik.handleBlur}
+          placeholder=""
+          value={formik.values.location}
+          error={formik.errors.location}
+          touched={formik.touched.location}
+          onChange={formik.handleChange}
+          setFieldTouched={formik.setFieldTouched}
+        />
+
+        <GridItem
+          as={Input}
+          required
+          type="date"
+          id="date"
+          label="date"
+          onBlur={formik.handleBlur}
+          value={formik.values.date}
+          error={formik.errors.date}
+          touched={formik.touched.date}
+          onChange={formik.handleChange}
+          setFieldTouched={formik.setFieldTouched}
+        />
+
+        <GridItem
+          as={Input}
+          required
+          id="members"
+          type="text"
+          label="Members"
+          onBlur={formik.handleBlur}
+          value={formik.values.member}
+          error={formik.errors.member}
+          touched={formik.touched.member}
+          onChange={formik.handleChange}
+          setFieldTouched={formik.setFieldTouched}
+        />
+
+        <GridItem
+          as={Input}
+          required
+          type="text"
+          id="file"
+          label="Add file"
+          placeholder="add file"
+          onBlur={formik.handleBlur}
+          value={formik.values.file}
+          error={formik.errors.file}
+          touched={formik.touched.file}
+          onChange={formik.handleChange}
+          setFieldTouched={formik.setFieldTouched}
+        />
+
+        <GridItem
+          as={TextArea}
+          required
+          id="note"
+          label="Add Note"
+          onBlur={formik.handleBlur}
+          value={formik.values.note}
+          error={formik.errors.note}
+          touched={formik.touched.note}
+          onChange={formik.handleChange}
+          setFieldTouched={formik.setFieldTouched}
+        />
+      </Grid>
+
+      <Flex mt={16} w="full" justify="center">
+        {isAdd ? (
+          <>
+            <FilledButton
+              w={44}
+              type="submit"
+              title="Submit"
+              isLoading={isLoading}
+              isDisabled={isLoading || !(formik.dirty && formik.isValid)}
+            />
+            <Box mx={2} />
+            {toggle && (
+              <FilledButton
+                w={44}
+                title="View Tree"
+                onClick={() => toggle('view')}
+              />
+            )}
+          </>
+        ) : (
+          <FilledButton
+            w={44}
+            type="submit"
+            title="Update"
+            isLoading={isLoading}
+            isDisabled={isLoading || !(formik.dirty && formik.isValid)}
+          />
+        )}
+      </Flex>
+    </form>
+  )
+}
+
+export default AddMemory

src/Components/Forms/FormTextArea.tsx

@@ -20,8 +20,23 @@ const FormTextArea: FC<IFormProps & TextareaProps> = ({
 }) => {
   return (
     <FormControl id={rest.id || rest.name} isRequired={required}>
-      <FormLabel color="gray.500">{label}</FormLabel>
-      <Textarea size="lg" {...rest} resize="none" />
+      <FormLabel
+        fontWeight={600}
+        fontSize={{ base: 12, xl: 14 }}
+        color="gray.700"
+      >
+        {label}
+      </FormLabel>
+      <Textarea
+        size="lg"
+        {...rest}
+        resize="none"
+        fontSize={{ base: 12, xl: 14 }}
+        h={{ base: 10, lg: 12 }}
+        borderWidth={0}
+        bgColor="white"
+        shadow="md"
+      />
       <FormErrorHandler
         error={error}
         touched={touched}

src/Components/Memories/index.tsx

@@ -4,6 +4,7 @@ import { FilledButton, SecondaryButton } from 'Components/Buttons'
 import { FaPlay } from 'react-icons/fa'
 import { useDisclosure } from '@chakra-ui/react'
 
+import { Views } from 'Views/Memories'
 import FamilyDinner from 'Assets/Images/family-dinner.png'
 import Party from 'Assets/Images/party.png'
 import Wedding from 'Assets/Images/wedding.png'
@@ -45,7 +46,9 @@ const MemoriesData: IMemories[] = [
     type: 'pic'
   }
 ]
-const Memories: FC = () => {
+const Memories: FC<{ isAdd?: boolean; toggle: (e: Views) => void }> = ({
+  toggle
+}) => {
   const { isOpen, onOpen, onClose } = useDisclosure()
   const [selectedItem, setSelectedItem] = useState<IMemories | undefined>()
   return (
@@ -106,7 +109,11 @@ const Memories: FC = () => {
       </Grid>
       <Flex mt={12} align="center" justify="center">
         <Box>
-          <SecondaryButton title="Add Memory" mr={4} />
+          <SecondaryButton
+            title="Add Memory"
+            mr={4}
+            onClick={() => toggle('add')}
+          />
           <FilledButton title="Share Memories" />
         </Box>
       </Flex>

src/Views/Memories/index.tsx

@@ -1,15 +1,20 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import { Box } from '@chakra-ui/react'
 import Wrapper from 'Container/Layout'
 import Memories from 'Components/Memories'
+import AddMemories from 'Components/AddMemory'
 
-const Profile: FC = () => {
-  document.title = 'Family Line | Profile'
+export type Views = 'add' | 'view'
 
+const Profile: FC = () => {
+  document.title = 'Family Line | Memories'
+  const [view, setView] = useState<Views>('view')
+  const toggle = (e: Views) => setView(e)
   return (
     <Wrapper>
       <Box my={{ xl: 20 }} width={{ xl: '80%' }}>
-        <Memories />
+        {view === 'add' && <AddMemories isAdd toggle={toggle} />}
+        {view === 'view' && <Memories toggle={toggle} />}
       </Box>
     </Wrapper>
   )