You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import * as React from 'react';
|
|
import { useState, useEffect } from 'react';
|
|
import { Outlet } from "react-router-dom";
|
|
|
|
import '@fontsource/roboto/300.css';
|
|
import '@fontsource/roboto/400.css';
|
|
import '@fontsource/roboto/500.css';
|
|
import '@fontsource/roboto/700.css';
|
|
|
|
import { AppBar, CssBaseline, Toolbar, Typography } from '@mui/material';
|
|
|
|
import { useAppSelector } from './hooks';
|
|
|
|
type SetTitleType = {setTitle: (string) => void, setSubtitle: (string) => void}
|
|
export const SetTitleContext = React.createContext<SetTitleType>({setTitle: () => {}, setSubtitle: () => {}})
|
|
|
|
function App() {
|
|
const [title, setTitle] = useState("")
|
|
const [subtitle, setSubtitle] = useState("")
|
|
|
|
return (
|
|
<div className="App">
|
|
<CssBaseline />
|
|
<AppBar className="AppBar" position="sticky" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}>
|
|
<Toolbar sx={{ justifyContent: "space-between" }}>
|
|
<Typography variant="h6" noWrap component="div">
|
|
{title}
|
|
</Typography>
|
|
<Typography variant="h6" noWrap component="div">
|
|
{subtitle}
|
|
</Typography>
|
|
</Toolbar>
|
|
</AppBar>
|
|
<SetTitleContext.Provider value={{setTitle, setSubtitle}}>
|
|
<Outlet />
|
|
</SetTitleContext.Provider>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default App
|