Criando página de cadastro de eletivas

frontend/src/components/Button/index.js

@@ -10,3 +10,11 @@ const Button = ({ Text, onClick, Type = "button" }) => {
 };
 
 export default Button;
+
+const ButtonCadastrar = ({ Text, onClick, Type = "button" }) => {
+  return (
+    <C.Button type={Type} onClick={onClick}>
+      {Text}
+    </C.Button>
+  );
+};

frontend/src/pages/CreateEletivas/index.js

@@ -0,0 +1,131 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { ChakraProvider } from '@chakra-ui/react'
+import { Image } from '@chakra-ui/react'
+import cmtnLogo from '../../img/cmtnLogo.png'
+import menuHamburguer from '../../icon/menuHamburguer.png'
+import Header from "../Home";
+import ButtonCadastrar from "../../components/Button";
+import * as C from "./styles";
+
+
+import { 
+  Input,
+  Box,
+  Center,
+  Flex,
+  FormControl,
+  FormLabel,
+  HStack,
+  RadioGroup,
+  Radio,
+  Button,
+  Select,
+  Text,
+  Stack,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  MenuItemOption,
+  MenuGroup,
+  MenuOptionGroup,
+  MenuDivider,
+} from "@chakra-ui/react"
+import { Heading } from "chakra-ui";
+
+
+const CreateEletivas = () => {
+  return (
+   <Box h="100vh">
+        <Header></Header>
+    <Center
+      as="header"
+      h={150}
+      bg="teal.500"
+      color='#F4F4F2'
+      fontweight="bold"
+      fontSize="4xl"
+      pb="8"
+      Content
+      >     
+    </Center>
+
+    <Flex
+      maxHeight='100vh'
+      width='full'
+      align="center"
+      justify="center"
+      bg="blackAlpha.200"
+      //h="calc(100vh - 200 px)"
+    >
+      <Box
+
+        px={12}
+        py={12}
+        width='full'
+        maxWidth='450px'
+        textAlign='center'
+        boxShadow='lg'
+        background='#F4F4F2'
+        borderRadius='6px'
+        >
+          <form action="" autoComplete='off'>
+            <FormControl display="flex" flexDirection="column" gap="4">
+
+              <Heading>
+                <Text color='#243A69' fontSize='2xl' > Cadastro de Eletivas</Text>
+              </Heading>
+
+              <FormLabel color= '#243A69'>Nome da eletiva</FormLabel>
+              <Input  
+                //placeholder =  'Nome da eletiva' 
+                //_placeholder={{opacity:1, color: 'inherit' }} 
+                //color= '#243A69' size='ls'
+                isRequired 
+              />
+
+              <FormLabel color= '#243A69'>Descrição</FormLabel> 
+              <Input 
+                //placeholder =  'Descrição'  
+                //_placeholder={{opacity:1, color: 'inherit' }} 
+                //color= '#243A69' 
+                //size='md'
+                isRequired 
+              />
+              <FormLabel color= '#243A69'>Série</FormLabel> 
+              <Select 
+                placeholder='Selecione a série' 
+                _placeholder={{opacity:1, color: 'inherit' }} 
+                //color= '#243A69' 
+                //size='md'
+                isRequired
+              >
+                <option value='option1'> 1</option>
+                <option value='option2'> 2</option>
+                <option value='option3'> 3</option>
+              </Select>
+
+              <FormLabel color= '#243A69'>Professor Responsável</FormLabel> 
+              <Input isRequired/>
+
+              <FormLabel color= '#243A69'>Número de vagas</FormLabel> 
+              <Input isRequired />
+
+              <FormLabel color= '#243A69'>Horário da aula</FormLabel> 
+              <Input isRequired/>
+
+              <ButtonCadastrar Text="Cadastrar" />
+
+
+            </FormControl>
+          </form>
+      </Box>
+
+    </Flex>
+   </Box>
+
+  );
+};
+
+export default CreateEletivas;

frontend/src/pages/CreateEletivas/styles.js

@@ -0,0 +1,67 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 10px;
+  height: 100vh;
+  background-color: #243a69;
+`;
+
+export const Content = styled.div`
+  gap: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  box-shadow: 0 1px 2px #0003;
+  background-color: #f4f4f2;
+  max-width: 1000px;
+  max-height: 650px;
+  padding: 0px;
+  border-radius: 60px;
+`;
+
+export const Label = styled.label`
+  font-size: 18px;
+  font-weight: 600;
+  color: #676767;
+`;
+
+export const LabelSignup = styled.label`
+  font-size: 16px;
+  color: #676767;
+`;
+
+export const labelError = styled.label`
+  font-size: 14px;
+  color: red;
+`;
+
+export const Strong = styled.strong`
+  cursor: pointer;
+
+  a {
+    text-decoration: none;
+    color: #676767;
+  }
+`;
+export const titulo = styled.div`
+  font-size: 150%;
+  font-weight: 600;
+  color: #243A69;
+  margin-left: 20px;
+  margin-top: 20px;
+  align: center;
+`;
+export const box = styled.div`
+`;
+
+export const texto = styled.label`
+  color: #243A69;
+
+`;

frontend/src/routes/index.js

@@ -4,6 +4,7 @@ import useAuth from "../hooks/useAuth";
 import Home from "../pages/Home";
 import Signin from "../pages/Signin";
 import Signup from "../pages/Signup";
+import CreateEletivas from "../pages/CreateEletivas";
 
 const Private = ({ Item }) => {
   const { signed } = useAuth();
@@ -20,6 +21,7 @@ const RoutesApp = () => {
           <Route path="/" element={<Signin />} />
           <Route exact path="/signup" element={<Signup />} />
           <Route path="*" element={<Signin />} />
+          <Route exact path="/CreateEletivas" element={<CreateEletivas />} />
         </Routes>
       </Fragment>
     </BrowserRouter>