dependency: Added ChakraUI to index.tsx

stevensblueprint · Feb 13, 2024 · c017365 · c017365
1 parent 6decf59
commit c017365
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 18 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,24 +1,24 @@
-import React from 'react'
-import logo from './logo.svg'
-import './App.css'
+import { Box, Container, Spinner } from '@chakra-ui/react'
 
 function App (): JSX.Element {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
+    <div style={{ height: '100vh' }}>
+      <Container height="100%" display="flex" justifyContent="center" alignItems="center">
+        <Box
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          height="100px"
         >
-          Learn React
-        </a>
-      </header>
+          <Spinner
+            thickness='4px'
+            speed='0.65s'
+            emptyColor='gray.200'
+            color='blue.500'
+            size='xl'
+          />
+        </Box>
+      </Container>
     </div>
   )
 }

diff --git a/src/index.tsx b/src/index.tsx
@@ -3,14 +3,17 @@ import ReactDOM from 'react-dom/client'
 import './index.css'
 import App from './App'
 import reportWebVitals from './reportWebVitals'
+import { ChakraProvider } from '@chakra-ui/react'
 
 const rootElement = document.getElementById('root')
 
 if (rootElement !== null) {
   const root = ReactDOM.createRoot(rootElement)
   root.render(
     <React.StrictMode>
-      <App />
+      <ChakraProvider>
+        <App />
+      </ChakraProvider>
     </React.StrictMode>
   )
 } else {