Spaces:
Running
Running
File size: 2,614 Bytes
5470817 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
import React, { useEffect } from "react";
import {
HashRouter as Router,
Routes,
Route,
useSearchParams,
useLocation,
} from "react-router-dom";
import { ThemeProvider } from "@mui/material/styles";
import { Box, CssBaseline } from "@mui/material";
import Navigation from "./components/Navigation/Navigation";
import LeaderboardPage from "./pages/LeaderboardPage/LeaderboardPage";
import HowToSubmitPage from "./pages/HowToSubmitPage/HowToSubmitPage";
import Footer from "./components/Footer/Footer";
import getTheme from "./config/theme";
import { useThemeMode } from "./hooks/useThemeMode";
function UrlHandler() {
const location = useLocation();
const [searchParams] = useSearchParams();
useEffect(() => {
const isHFSpace = window.location !== window.parent.location;
if (!isHFSpace) return;
const queryString = window.location.search;
const hash = window.location.hash;
window.parent.postMessage(
{
queryString,
hash,
},
"https://huggingface.co"
);
}, [location, searchParams]);
useEffect(() => {
const handleHashChange = (event) => {
console.log("hash change event", event);
};
window.addEventListener("hashchange", handleHashChange);
return () => window.removeEventListener("hashchange", handleHashChange);
}, []);
return null;
}
function App() {
const { mode, toggleTheme } = useThemeMode();
const theme = getTheme(mode);
return (
<div
className="App"
style={{
height: "100%",
width: "100%",
WebkitOverflowScrolling: "touch",
overflow: "auto",
}}
>
<ThemeProvider theme={theme}>
<CssBaseline />
<Router>
<UrlHandler />
<Box
sx={{
minHeight: "100vh",
display: "flex",
flexDirection: "column",
bgcolor: "background.default",
color: "text.primary",
}}
>
<Navigation onToggleTheme={toggleTheme} mode={mode} />
<Box
sx={{
flex: 1,
display: "flex",
flexDirection: "column",
width: "100%",
px: 4,
pb: 4,
}}
>
<Routes>
<Route path="/" element={<LeaderboardPage />} />
<Route path="/submit" element={<HowToSubmitPage />} />
</Routes>
</Box>
<Footer />
</Box>
</Router>
</ThemeProvider>
</div>
);
}
export default App;
|