Skip to content

Instantly share code, notes, and snippets.

@skolhustick

skolhustick/App.js

Created May 25, 2020 07:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save skolhustick/e2be8f71ebba47f196a8e1aded3b910b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save skolhustick/e2be8f71ebba47f196a8e1aded3b910b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. skolhustick created this gist May 25, 2020.
    112 changes: 112 additions & 0 deletions App.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,112 @@
    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/core'

    const VARIANT_COLOR = 'teal'

    const App = () => {
    return (
    <ThemeProvider theme={theme}>
    <ColorModeProvider>
    <CSSReset />
    <LoginArea />
    </ColorModeProvider>
    </ThemeProvider>
    )
    }

    const LoginArea = () => {
    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'
    >
    <ThemeSelector />
    <Box p={4}>
    <LoginHeader />
    <LoginForm />
    </Box>
    </Box>
    </Flex>
    )
    }

    const ThemeSelector = () => {
    const { colorMode, toggleColorMode } = useColorMode()

    return (
    <Box textAlign='right' py={4}>
    <IconButton
    icon={colorMode === 'light' ? 'moon' : 'sun'}
    onClick={toggleColorMode}
    variant='ghost'
    />
    </Box>
    )
    }

    const LoginHeader = () => {
    return (
    <Box textAlign='center'>
    <Heading>Sign In to Your Account</Heading>
    <Text>
    Or <Link color={`${VARIANT_COLOR}.500`}>start your 14 days trial</Link>
    </Text>
    </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>

    <Stack isInline justifyContent='space-between' mt={4}>
    <Box>
    <Checkbox>Remember Me</Checkbox>
    </Box>
    <Box>
    <Link color={`${VARIANT_COLOR}.500`}>Forgot your password?</Link>
    </Box>
    </Stack>

    <Button variantColor={VARIANT_COLOR} width='full' mt={4}>Sign In</Button>
    </form>
    </Box>
    )
    }

    export default App