@chakra-ui/react#ChakraProvider JavaScript Examples
The following examples show how to use
@chakra-ui/react#ChakraProvider.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.js From DAOInsure with MIT License | 6 votes |
|
ReactDOM.render(
<React.StrictMode>
<Web3ContextProvider>
<AppContextProvider>
<ChakraProvider theme={theme}>
<Box backgroundColor="whiteAlpha">
<App />
</Box>
</ChakraProvider>
</AppContextProvider>
</Web3ContextProvider>
</React.StrictMode>,
document.getElementById("root")
);
Example #2
| Source File: App.js From bottle-radio with MIT License | 6 votes |
|
function App() {
const path = window.location.pathname;
return (
<div className="App">
{path === "/embed" ? (
<PlayerEmbed />
) : (
<ChakraProvider theme={customTheme}>
<CSSReset />
<Container />
</ChakraProvider>
)}
</div>
);
}
Example #3
| Source File: index.story.js From react-table-library with MIT License | 6 votes |
|
stories.forEach((story, i) => {
storyContainer.add(
story.key,
() => (
<ChakraProvider>
<story.Component />
</ChakraProvider>
),
{
docs: { source: { code: story.code || '' } },
},
);
});
Example #4
| Source File: chakra.js From benjamincarlson.io with MIT License | 6 votes |
|
export function Chakra({ cookies, children }) {
const colorModeManager =
typeof cookies === "string"
? cookieStorageManager(cookies)
: localStorageManager
return (
<ChakraProvider colorModeManager={colorModeManager} theme={customTheme}>
{children}
</ChakraProvider>
)
}
Example #5
| Source File: App.js From react-sample-projects with MIT License | 6 votes |
|
function App() {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Router hashType="slash">
<ChakraProvider theme={theme}>
<NavBar />
<Box
textAlign="center"
fontSize="xl"
height="calc(100vh - 64px)"
width="90%"
pt={16}
ml={'auto'}
mr={'auto'}
>
<Routes>
<Route exact path="/" element={<Home />}></Route>
<Route
exact
path="/product/add"
element={<ProductAddEdit />}
></Route>
<Route
exact
path="/product/:id"
element={<ProductDetails />}
></Route>
<Route exact path="/cart" element={<Cart />}></Route>
</Routes>
</Box>
</ChakraProvider>
</Router>
</PersistGate>
</Provider>
);
}
Example #6
| Source File: test-utils.js From react-sample-projects with MIT License | 6 votes |
|
AllProviders = ({ children }) => (
<ChakraProvider theme={theme}>{children}</ChakraProvider>
)
Example #7
| Source File: _app.js From sided.news.web with MIT License | 6 votes |
|
function MyApp({ Component, pageProps }) {
const Layout = Component.Layout || EmptyLayout;
return (
<ChakraProvider>
<Toolbar />
<Layout>
<Component {...pageProps} />
</Layout>
<Footer />
</ChakraProvider>
);
}
Example #8
| Source File: _app.js From grandcast.fm with Apache License 2.0 | 6 votes |
|
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider>
<AuthProvider>
<Header />
<Component {...pageProps} />
</AuthProvider>
</ChakraProvider>
)
}
Example #9
| Source File: index.jsx From scaffold-directory with MIT License | 6 votes |
|
ReactDOM.render(
<ChakraProvider theme={theme}>
<BrowserRouter>
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
<App />
</BrowserRouter>
</ChakraProvider>,
document.getElementById("root"),
);
Example #10
| Source File: App.jsx From realtime-chat-supabase-react with Apache License 2.0 | 6 votes |
|
function App() {
const { username, setUsername, routeHash } = useAppContext();
if (routeHash) {
if (routeHash.endsWith("&type=recovery")) {
window.location.replace(`/login/${routeHash}`);
}
if (routeHash.startsWith("#error_code=404"))
return (
<div>
<p>This link has expired</p>
<a href="/" style={{ cursor: "pointer" }} variant="link">
Back to app
</a>
</div>
);
}
return (
<ChakraProvider theme={theme}>
<AppContextProvider>
<Box bg="gray.100">
{/* <ColorModeSwitcher justifySelf="flex-end" /> */}
<Router>
<Switch>
<Route exact path="/">
<Header username={username} setUsername={setUsername} />
<Chat username={username} />
<Footer username={username} />
</Route>
<Route>Not found</Route>
</Switch>
</Router>
</Box>
</AppContextProvider>
</ChakraProvider>
);
}
Example #11
| Source File: layout.js From codeursenseine.com with MIT License | 5 votes |
|
Layout = ({ children, theme = "ces" }) => {
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<ChakraProvider theme={themes[theme]}>
<Flex
minH="100vh"
maxW="100vw"
background="white"
color="brand.900"
style={{
minHeight: "calc(var(--vh, 1vh) * 100)",
}}
>
<Nav
isOpen={isOpen}
maxW="100vw"
w={{ base: "100%", [navBreakpoint]: navDesktopWidth }}
breakpoint={navBreakpoint}
onNavClose={onClose}
/>
<NavTopbar maxW="100vw" h={navTopbarHeight} onNavOpen={onOpen} />
<Box
as="main"
ml={{ [navBreakpoint]: navDesktopWidth }}
mt={{ base: navTopbarHeight, [navBreakpoint]: "0" }}
width="100%"
position="relative"
zIndex="1"
>
<Box
maxWidth="60rem"
width="100%"
overflow="auto"
marginX="auto"
p={6}
pb={16}
>
<PageHeader />
<Mdx>{children}</Mdx>
</Box>
</Box>
</Flex>
</ChakraProvider>
);
}
Example #12
| Source File: _app.js From javascript-mini-projects with The Unlicense | 5 votes |
|
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
);
}
Example #13
| Source File: App.js From MeowForm with MIT License | 5 votes |
|
function App() {
return (
<ChakraProvider>
<Index />
</ChakraProvider>
);
}
Example #14
| Source File: _app.js From handsign-tensorflow with BSD 2-Clause "Simplified" License | 5 votes |
|
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
)
}
Example #15
| Source File: index.js From web-client with Apache License 2.0 | 5 votes |
|
onAuthSuccess = () => {
appRoot.render(<React.StrictMode>
<ChakraProvider theme={ReconmapTheme}>
<App />
<ToastContainer />
</ChakraProvider>
</React.StrictMode>);
}
Example #16
| Source File: _app.js From UpStats with MIT License | 5 votes |
|
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider theme={theme}>
<Component {...pageProps} />
</ChakraProvider>
);
}
Example #17
| Source File: index.js From interspace.chat with GNU General Public License v3.0 | 5 votes |
|
root.render(
<>
<CSSReset />
<ChakraProvider theme={theme}>
<App />
</ChakraProvider>
</>
);
Example #18
| Source File: index.js From GitMarkonics with MIT License | 5 votes |
|
ReactDOM.render(
<ChakraProvider>
<App />
</ChakraProvider>,
document.getElementById("root")
);
Example #19
| Source File: _app.js From idena-web with MIT License | 4 votes |
|
// Workaround for https://github.com/zeit/next.js/issues/8592
export default function MyApp({Component, pageProps, err}) {
return (
<>
<Head>
<meta charSet="UTF-8" />
<title>Idena app: Proof-of-person blockchain</title>
<meta httpEquiv="X-UA-Compatible" content="chrome=1" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"
/>
<meta
name="description"
content="Take part in the Idena validation ceremony using your browser"
/>
<link rel="shortcut icon" href="/favicon.ico" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicon-16x16.png"
/>
<style data-href="https://fonts.googleapis.com/css2?family=Inter">
{`/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}`}
</style>
<link href="/static/fonts/icons.css" rel="stylesheet" />
<link href="/static/scrollbars.css" rel="stylesheet" />
<style>{`
html {
-moz-osx-font-smoothing: grayscale;
}
`}</style>
<script
type="text/javascript"
src="https://apis.google.com/js/api.js"
></script>
</Head>
<ChakraProvider theme={extendTheme(uiTheme)}>
<IdenaApp>
<Component {...{...pageProps, err}} />
</IdenaApp>
</ChakraProvider>
</>
)
}
Example #20
| Source File: index.js From handsign-tensorflow with BSD 2-Clause "Simplified" License | 4 votes |
|
export default function Home() {
const webcamRef = useRef(null)
const canvasRef = useRef(null)
const [camState, setCamState] = useState("on")
const [sign, setSign] = useState(null)
let signList = []
let currentSign = 0
let gamestate = "started"
// let net;
async function runHandpose() {
const net = await handpose.load()
_signList()
// window.requestAnimationFrame(loop);
setInterval(() => {
detect(net)
}, 150)
}
function _signList() {
signList = generateSigns()
}
function shuffle(a) {
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1))
;[a[i], a[j]] = [a[j], a[i]]
}
return a
}
function generateSigns() {
const password = shuffle(Signpass)
return password
}
async function detect(net) {
// Check data is available
if (
typeof webcamRef.current !== "undefined" &&
webcamRef.current !== null &&
webcamRef.current.video.readyState === 4
) {
// Get Video Properties
const video = webcamRef.current.video
const videoWidth = webcamRef.current.video.videoWidth
const videoHeight = webcamRef.current.video.videoHeight
// Set video width
webcamRef.current.video.width = videoWidth
webcamRef.current.video.height = videoHeight
// Set canvas height and width
canvasRef.current.width = videoWidth
canvasRef.current.height = videoHeight
// Make Detections
const hand = await net.estimateHands(video)
if (hand.length > 0) {
//loading the fingerpose model
const GE = new fp.GestureEstimator([
fp.Gestures.ThumbsUpGesture,
Handsigns.aSign,
Handsigns.bSign,
Handsigns.cSign,
Handsigns.dSign,
Handsigns.eSign,
Handsigns.fSign,
Handsigns.gSign,
Handsigns.hSign,
Handsigns.iSign,
Handsigns.jSign,
Handsigns.kSign,
Handsigns.lSign,
Handsigns.mSign,
Handsigns.nSign,
Handsigns.oSign,
Handsigns.pSign,
Handsigns.qSign,
Handsigns.rSign,
Handsigns.sSign,
Handsigns.tSign,
Handsigns.uSign,
Handsigns.vSign,
Handsigns.wSign,
Handsigns.xSign,
Handsigns.ySign,
Handsigns.zSign,
])
const estimatedGestures = await GE.estimate(hand[0].landmarks, 6.5)
// document.querySelector('.pose-data').innerHTML =JSON.stringify(estimatedGestures.poseData, null, 2);
if (gamestate === "started") {
document.querySelector("#app-title").innerText =
"Make a ? gesture with your hand to start"
}
if (
estimatedGestures.gestures !== undefined &&
estimatedGestures.gestures.length > 0
) {
const confidence = estimatedGestures.gestures.map(p => p.confidence)
const maxConfidence = confidence.indexOf(
Math.max.apply(undefined, confidence)
)
//setting up game state, looking for thumb emoji
if (
estimatedGestures.gestures[maxConfidence].name === "thumbs_up" &&
gamestate !== "played"
) {
_signList()
gamestate = "played"
document.getElementById("emojimage").classList.add("play")
document.querySelector(".tutor-text").innerText =
"make a hand gesture based on letter shown below"
} else if (gamestate === "played") {
document.querySelector("#app-title").innerText = ""
//looping the sign list
if (currentSign === signList.length) {
_signList()
currentSign = 0
return
}
// console.log(signList[currentSign].src.src)
//game play state
if (
typeof signList[currentSign].src.src === "string" ||
signList[currentSign].src.src instanceof String
) {
document
.getElementById("emojimage")
.setAttribute("src", signList[currentSign].src.src)
if (
signList[currentSign].alt ===
estimatedGestures.gestures[maxConfidence].name
) {
currentSign++
}
setSign(estimatedGestures.gestures[maxConfidence].name)
}
} else if (gamestate === "finished") {
return
}
}
}
// Draw hand lines
const ctx = canvasRef.current.getContext("2d")
drawHand(hand, ctx)
}
}
// if (sign) {
// console.log(sign, Signimage[sign])
// }
useEffect(() => {
runHandpose()
}, [])
function turnOffCamera() {
if (camState === "on") {
setCamState("off")
} else {
setCamState("on")
}
}
return (
<ChakraProvider>
<Metatags />
<Box bgColor="#5784BA">
<Container centerContent maxW="xl" height="100vh" pt="0" pb="0">
<VStack spacing={4} align="center">
<Box h="20px"></Box>
<Heading
as="h3"
size="md"
className="tutor-text"
color="white"
textAlign="center"
></Heading>
<Box h="20px"></Box>
</VStack>
<Heading
as="h1"
size="lg"
id="app-title"
color="white"
textAlign="center"
>
?♀️ Loading the Magic ?♂️
</Heading>
<Box id="webcam-container">
{camState === "on" ? (
<Webcam id="webcam" ref={webcamRef} />
) : (
<div id="webcam" background="black"></div>
)}
{sign ? (
<div
style={{
position: "absolute",
marginLeft: "auto",
marginRight: "auto",
right: "calc(50% - 50px)",
bottom: 100,
textAlign: "-webkit-center",
}}
>
<Text color="white" fontSize="sm" mb={1}>
detected gestures
</Text>
<img
alt="signImage"
src={
Signimage[sign]?.src
? Signimage[sign].src
: "/loveyou_emoji.svg"
}
style={{
height: 30,
}}
/>
</div>
) : (
" "
)}
</Box>
<canvas id="gesture-canvas" ref={canvasRef} style={{}} />
<Box
id="singmoji"
style={{
zIndex: 9,
position: "fixed",
top: "50px",
right: "30px",
}}
></Box>
<Image h="150px" objectFit="cover" id="emojimage" />
{/* <pre className="pose-data" color="white" style={{position: 'fixed', top: '150px', left: '10px'}} >Pose data</pre> */}
</Container>
<Stack id="start-button" spacing={4} direction="row" align="center">
<Button
leftIcon={
camState === "on" ? (
<RiCameraFill size={20} />
) : (
<RiCameraOffFill size={20} />
)
}
onClick={turnOffCamera}
colorScheme="orange"
>
Camera
</Button>
<About />
</Stack>
</Box>
</ChakraProvider>
)
}
