-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
bc2f7b4
commit ff82ab8
Showing
4 changed files
with
96 additions
and
92 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,10 @@ | ||
| import React from "react"; | ||
| import * as C from "./styles"; | ||
|
|
||
| const Footer = ({ type, placeholder, value, onChange }) => { | ||
| const Footer = () => { | ||
| return ( | ||
| <C.Input | ||
| value={value} | ||
| onChange={onChange} | ||
| type={type} | ||
| placeholder={placeholder} | ||
| /> | ||
| <></> | ||
| ); | ||
| }; | ||
|
|
||
| export default Input; | ||
| export default Footer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import React from "react"; | ||
| import { Link } from "react-router-dom"; | ||
| import { Flex, Box, Spacer, Menu, MenuButton } from "@chakra-ui/react"; | ||
| import { Image } from '@chakra-ui/react' | ||
| import cmtnLogo from '../../img/cmtnLogo.png' | ||
| import menuHamburguer from '../../icon/menuHamburguer.png' | ||
| import userIcon from '../../icon/usuario-do-circulo 1.png'; | ||
| import settingsIcon from '../../icon/definicoes 1.png'; | ||
| import helpIcon from '../../icon/interrogatorio 1.png'; | ||
| import logoutIcon from '../../icon/sair-alt 1.png'; | ||
| import { StyledMenuList, StyledImage, StyledMenuItem } from "./styles"; | ||
|
|
||
|
|
||
| const Header = () => { | ||
|
|
||
| return ( | ||
| <Flex | ||
| as="header" | ||
| align="center" | ||
| justify="space-between" | ||
| padding="1rem" | ||
| backgroundColor="#243A69" | ||
| color="white" | ||
| > | ||
| <Box maxWidth={'16vh'} maxHeight={'16vh'} paddingLeft='3vh'> | ||
| <Link to="/Home"> | ||
| <Image src={cmtnLogo} alt='student' style={{ maxWidth: '100%', height: 'auto' }} /> | ||
| </Link> | ||
| </Box> | ||
| <Spacer /> | ||
| <Box maxWidth={'5vh'} maxHeight={'2vh'} marginTop={'-0.5px'} marginBottom={'3vh'} > | ||
| <Menu> | ||
| <MenuButton border={'none'} bgColor={'#243A69'} > | ||
| <Image src={menuHamburguer} alt='menuHamburguer' style={{ maxWidth: '100%', height: 'auto' }}/> | ||
| </MenuButton> | ||
| <StyledMenuList> | ||
| <StyledMenuItem> | ||
| <StyledImage src={userIcon} alt='User Icon' /> | ||
| Conta | ||
| </StyledMenuItem> | ||
| <StyledMenuItem> | ||
| <StyledImage src={settingsIcon} alt='Settings Icon' /> | ||
| Configuração | ||
| </StyledMenuItem> | ||
| <StyledMenuItem> | ||
| <StyledImage src={helpIcon} alt='Help Icon' /> | ||
| Ajuda | ||
| </StyledMenuItem> | ||
| <StyledMenuItem> | ||
| <StyledImage src={logoutIcon} alt='Logout Icon' /> | ||
| <button>Sair</button> | ||
| </StyledMenuItem> | ||
| </StyledMenuList> | ||
| </Menu> | ||
| </Box> | ||
| </Flex> | ||
| ); | ||
| }; | ||
|
|
||
| export default Header; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import { chakra, MenuList, MenuItem, Image } from '@chakra-ui/react'; | ||
|
|
||
| export const StyledMenuList = chakra(MenuList, { | ||
| baseStyle: { | ||
| listStyle: 'circle', | ||
| padding: 0, | ||
| margin: 0, | ||
| }, | ||
| }); | ||
|
|
||
| export const StyledMenuItem = chakra(MenuItem, { | ||
| baseStyle: { | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| marginBottom: '10px', | ||
| color: 'white', // Cor azul para o texto | ||
| fontFamily: 'Arial, sans-serif', // Altera a fonte | ||
| backgroundColor: '#243A69', | ||
| }, | ||
| }); | ||
|
|
||
| export const StyledImage = chakra(Image, { | ||
| baseStyle: { | ||
| maxWidth: '24px', | ||
| maxHeight: '24px', | ||
| marginRight: '10px', // Adiciona um espaçamento entre a imagem e o texto | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,90 +1,11 @@ | ||
| import React from "react"; | ||
| import axios from "axios" | ||
| import styled from "styled-components"; | ||
| import { Link } from "react-router-dom"; | ||
| import { Flex, Box, Heading, Spacer, Menu, MenuButton, MenuList, MenuItem } from "@chakra-ui/react"; | ||
| import { Image } from '@chakra-ui/react' | ||
| import cmtnLogo from '../../img/cmtnLogo.png' | ||
| import menuHamburguer from '../../icon/menuHamburguer.png' | ||
| import userIcon from '../../icon/usuario-do-circulo 1.png'; | ||
| import settingsIcon from '../../icon/definicoes 1.png'; | ||
| import helpIcon from '../../icon/interrogatorio 1.png'; | ||
| import logoutIcon from '../../icon/sair-alt 1.png'; | ||
| import Header from '../../components/Header/index.js' | ||
|
|
||
| const Home = () => { | ||
|
|
||
|
|
||
| const Header = () => { | ||
|
|
||
|
|
||
|
|
||
| const StyledMenuList = styled(MenuList)` | ||
| list-style: 'circle'; | ||
| padding: 0; | ||
| margin: 0; | ||
| `; | ||
|
|
||
| const StyledMenuItem = styled(MenuItem)` | ||
| display: flex; | ||
| align-items: center; | ||
| margin-bottom: 10px; | ||
| color: white; /* Cor azul para o texto */ | ||
| font-family: Arial, sans-serif; /* Altera a fonte */ | ||
| background-color: #243A69; | ||
| `; | ||
|
|
||
| const StyledImage = styled(Image)` | ||
| max-width: 24px; | ||
| max-height: 24px; | ||
| margin-right: 10px; /* Adiciona um espaçamento entre a imagem e o texto */ | ||
| `; | ||
|
|
||
| return ( | ||
| <Flex | ||
| as="header" | ||
| align="center" | ||
| justify="space-between" | ||
| padding="1rem" | ||
| backgroundColor="#243A69" | ||
| color="white" | ||
| > | ||
| <Box> | ||
| <Heading as="h1" size="lg"> | ||
| <Box maxWidth={'16vh'} maxHeight={'16vh'} paddingLeft='3vh'> | ||
| <Image src={cmtnLogo} alt='student' style={{ maxWidth: '100%', height: 'auto' }} /> | ||
| </Box> | ||
| </Heading> | ||
| </Box> | ||
| <Spacer /> | ||
| <Box> | ||
| <Link to="/">Home</Link> | ||
| <Box maxWidth={'5vh'} maxHeight={'2vh'} marginTop={'-0.5px'} marginBottom={'3vh'} > | ||
| <Menu> | ||
| <MenuButton border={'none'} bgColor={'#243A69'} > | ||
| <Image src={menuHamburguer} alt='menuHamburguer' style={{ maxWidth: '100%', height: 'auto' }}/> | ||
| </MenuButton> | ||
| <StyledMenuList> | ||
| <StyledMenuItem> | ||
| <StyledImage src={userIcon} alt='User Icon' /> | ||
| Conta | ||
| </StyledMenuItem> | ||
| <StyledMenuItem> | ||
| <StyledImage src={settingsIcon} alt='Settings Icon' /> | ||
| Configuração | ||
| </StyledMenuItem> | ||
| <StyledMenuItem> | ||
| <StyledImage src={helpIcon} alt='Help Icon' /> | ||
| Ajuda | ||
| </StyledMenuItem> | ||
| <StyledMenuItem> | ||
| <StyledImage src={logoutIcon} alt='Logout Icon' /> | ||
| <button>Sair</button> | ||
| </StyledMenuItem> | ||
| </StyledMenuList> | ||
| </Menu> | ||
| </Box> | ||
| </Box> | ||
| </Flex> | ||
| return ( | ||
| <Header></Header> | ||
| ); | ||
| }; | ||
|
|
||
| export default Header; | ||
| export default Home; |