-
-
Save renboy94/8f43fce656b4ff89d0384a89b57c7d92 to your computer and use it in GitHub Desktop.
ChakraUI - Login Form with ColorMode
This file contains hidden or 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
| import React from 'react'; | |
| import { | |
| ThemeProvider, | |
| theme, | |
| ColorModeProvider, | |
| CSSReset, | |
| Box, | |
| Flex, | |
| IconButton, | |
| useColorMode, | |
| Heading, | |
| Text, | |
| Link, | |
| FormControl, | |
| FormLabel, | |
| Input, | |
| Stack, | |
| Checkbox, | |
| Button, | |
| } from '@chakra-ui/react'; | |
| const VARIANT_COLOR = 'teal'; | |
| const Login = () => { | |
| return ( | |
| <Flex minHeight="100vh" width="full" align="center" justifyContent="center"> | |
| <Box | |
| borderWidth={1} | |
| px={4} | |
| width="full" | |
| maxWidth="500px" | |
| borderRadius={4} | |
| textAlign="center" | |
| boxShadow="lg" | |
| > | |
| <Box p={4}> | |
| <LoginHeader /> | |
| <LoginForm /> | |
| </Box> | |
| </Box> | |
| </Flex> | |
| ); | |
| }; | |
| const LoginHeader = () => { | |
| return ( | |
| <Box textAlign="center"> | |
| <Heading>Sign In to Your Account</Heading> | |
| </Box> | |
| ); | |
| }; | |
| const LoginForm = () => { | |
| return ( | |
| <Box my={8} textAlign="left"> | |
| <form> | |
| <FormControl> | |
| <FormLabel>Email address</FormLabel> | |
| <Input type="email" placeholder="Enter your email address" /> | |
| </FormControl> | |
| <FormControl mt={4}> | |
| <FormLabel>Password</FormLabel> | |
| <Input type="password" placeholder="Enter your password" /> | |
| </FormControl> | |
| <Button bg={'#FF5E3A'} width="full" mt={4}> | |
| Sign In | |
| </Button> | |
| </form> | |
| </Box> | |
| ); | |
| }; | |
| export default Login; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment