You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
976 B
43 lines
976 B
3 years ago
|
import React from 'react';
|
||
|
|
import {
|
||
|
|
ChakraProvider,
|
||
|
|
Box,
|
||
|
|
Text,
|
||
|
|
Link,
|
||
|
|
VStack,
|
||
|
|
Code,
|
||
|
|
Grid,
|
||
|
|
theme,
|
||
|
|
} from '@chakra-ui/react';
|
||
|
|
import { ColorModeSwitcher } from './ColorModeSwitcher';
|
||
|
|
import { Logo } from './Logo';
|
||
|
|
|
||
|
|
function App() {
|
||
|
|
return (
|
||
|
|
<ChakraProvider theme={theme}>
|
||
|
|
<Box textAlign="center" fontSize="xl">
|
||
|
|
<Grid minH="100vh" p={3}>
|
||
|
|
<ColorModeSwitcher justifySelf="flex-end" />
|
||
|
|
<VStack spacing={8}>
|
||
|
|
<Logo h="40vmin" pointerEvents="none" />
|
||
|
|
<Text>
|
||
|
|
Edit <Code fontSize="xl">src/App.js</Code> and save to reload.
|
||
|
|
</Text>
|
||
|
|
<Link
|
||
|
|
color="teal.500"
|
||
|
|
href="https://chakra-ui.com"
|
||
|
|
fontSize="2xl"
|
||
|
|
target="_blank"
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
>
|
||
|
|
Learn Chakra
|
||
|
|
</Link>
|
||
|
|
</VStack>
|
||
|
|
</Grid>
|
||
|
|
</Box>
|
||
|
|
</ChakraProvider>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default App;
|