Install and test Chakra UI

IT18021080/Telemedicine-Chat-App/frontend/package.json

@@ -3,9 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@chakra-ui/react": "^1.8.8",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "framer-motion": "^6.2.10",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-scripts": "5.0.0",

IT18021080/Telemedicine-Chat-App/frontend/src/App.js

 
+import { Button } from '@chakra-ui/react';
 import './App.css';
 
 function App() {
   return (
     <div className="App">
-     Hello Docotor
+     <Button colorScheme='blue'>Button</Button>
     </div>
   );
 }

IT18021080/Telemedicine-Chat-App/frontend/src/index.js

@@ -2,11 +2,15 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
+import { ChakraProvider } from '@chakra-ui/react'
 
 
 ReactDOM.render(
   <React.StrictMode>
+    <ChakraProvider>
       <App />
+    </ChakraProvider>
+    
   </React.StrictMode>,
   document.getElementById('root')
   //rendering everything on root tag