Create tasks components and progress bar component

Create tasks components and progress bar component

src/components/ProgressBar/index.tsx

+import { Flex, Text, Progress } from "@chakra-ui/react";
+import React from "react";
+/* eslint-disable jsx-a11y/label-has-associated-control */
+const ProgressBar = (): React.ReactElement => {
+  return (
+    <>
+      <Progress
+        h="25px"
+        w="120px"
+        value={20}
+        transform="rotate(270deg)"
+        borderRadius="6px"
+      />
+      <Text>33,3%</Text>
+    </>
+  );
+};
+
+export default ProgressBar;

src/pages/EventDetails/TaskList/index.tsx

+/* eslint-disable jsx-a11y/label-has-associated-control */
+import { Flex, VStack, Text } from "@chakra-ui/react";
+import React from "react";
+
+export const TaskList = (): React.ReactElement => {
+  return (
+    <VStack align="initial">
+      <Flex alignItems="center">
+        <input type="checkbox" id="checkbox0" />
+
+        <label htmlFor="checkbox0">
+          <Text ml="5px" fontSize={{ sm: "14px" }}>
+            Task 1
+          </Text>
+        </label>
+      </Flex>
+
+      <Flex alignItems="center">
+        <input type="checkbox" id="checkbox1" />
+        <label htmlFor="checkbox1">
+          <Text ml="5px" fontSize={{ sm: "14px" }}>
+            Task 2
+          </Text>
+        </label>
+      </Flex>
+
+      <Flex alignItems="center">
+        <input type="checkbox" id="checkbox2" />
+        <label htmlFor="checkbox2">
+          <Text ml="5px" fontSize={{ sm: "14px" }}>
+            Task 3
+          </Text>
+        </label>
+      </Flex>
+
+      <Flex alignItems="center">
+        <input type="checkbox" id="checkbox2" />
+        <label htmlFor="checkbox2">
+          <Text ml="5px" fontSize={{ sm: "14px" }}>
+            Task 3
+          </Text>
+        </label>
+      </Flex>
+
+      <Flex alignItems="center">
+        <input type="checkbox" id="checkbox2" />
+        <label htmlFor="checkbox2">
+          <Text ml="5px" fontSize={{ sm: "14px" }}>
+            Task 3
+          </Text>
+        </label>
+      </Flex>
+    </VStack>
+  );
+};
+
+export default TaskList;

src/pages/EventDetails/index.tsx

 /* eslint-disable no-restricted-globals */
-import { Box, Flex, Tag } from "@chakra-ui/react";
-import React, { useEffect, useState } from "react";
+import { Box, Flex, Tag, Text, HStack } from "@chakra-ui/react";
+import React, { ChangeEvent, useEffect, useState } from "react";
 import { useHistory, useParams } from "react-router-dom";
 
 import BottomMenu from "../../components/BottomMenu";
 import Button from "../../components/Button";
 import Carousel from "../../components/Carousel";
 import { Header } from "../../components/NewHeader";
+import ProgressBar from "../../components/ProgressBar";
 import StaticMap from "../../components/StaticMap";
 import { EventDetailsResponseDTO } from "../../model/eventModel";
 import { findEventById } from "../../services/eventService";
+import TaskList from "./TaskList";
 
 interface RouteParams {
   id: string;
@@ -28,6 +30,11 @@ const EventDetails = (): React.ReactElement => {
     })();
   }, []);
 
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    console.log(e);
+    console.log(e.target.value);
+  };
+
   return (
     <>
       <Header variant="double" position="fixed" zIndex="99" />
@@ -40,7 +47,7 @@ const EventDetails = (): React.ReactElement =&gt; {
         <Button
           theme="secondary"
           variant="back"
-          onClick={() => history.goBack()}
+          onClick={history.goBack}
           _hover={{ background: "yellow.400" }}
           _active={{ background: "yellow.400" }}
         />
@@ -61,6 +68,39 @@ const EventDetails = (): React.ReactElement =&gt; {
 
         <Carousel images={event.images} h={{ sm: "200px", md: "300px" }} />
 
+        <Box
+          bgColor="yellow.200"
+          h={{ sm: "7px" }}
+          w={{ sm: "150px" }}
+          ml="10px"
+          mt="10px"
+          borderRadius="10px"
+        />
+        <Text ml="10px" fontSize="14px">
+          Como posso ajudar?
+        </Text>
+
+        <HStack>
+          <Flex
+            w="50%"
+            maxH={{ sm: "115px" }}
+            pl="20px"
+            flexDir="column"
+            overflowY="auto"
+          >
+            <TaskList />
+          </Flex>
+          <Flex
+            w="50%"
+            h="100%"
+            pr="10px"
+            justifyContent="center"
+            alignItems="center"
+          >
+            <ProgressBar />
+          </Flex>
+        </HStack>
+
         <Flex
           flexDir="column"
           alignItems="center"