80 lines
1.6 KiB
TypeScript
80 lines
1.6 KiB
TypeScript
import { BrowserRouter, Route, Routes, useLocation } from "react-router";
|
|
import { usePath } from "./store/path";
|
|
import { useEffect, useState } from "react";
|
|
|
|
import "./App.scss";
|
|
import kuma from "./assets/kuma.png";
|
|
import { Menu, PanelLeftClose } from "lucide-react";
|
|
|
|
function App() {
|
|
return (
|
|
<BrowserRouter>
|
|
<Routes>
|
|
<Route path={"*"} element={<Dashboard />} />
|
|
</Routes>
|
|
</BrowserRouter>
|
|
);
|
|
}
|
|
|
|
function Dashboard() {
|
|
const path = usePath();
|
|
const location = useLocation();
|
|
const [load, setLoad] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!load) {
|
|
path.update(location.pathname.substring(1, location.pathname.length));
|
|
setLoad(true);
|
|
}
|
|
|
|
const id = setInterval(() => {
|
|
path.update(location.pathname.substring(1, location.pathname.length));
|
|
}, 5000);
|
|
|
|
return () => clearInterval(id);
|
|
}, [load, path, location]);
|
|
|
|
return (
|
|
<main className="container-md ka-view">
|
|
<Header />
|
|
</main>
|
|
);
|
|
}
|
|
|
|
function Header() {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<nav className="ka-nav">
|
|
<a className="title">
|
|
<img src={kuma} alt="" />
|
|
<h4 className="title-content">Kuma Archive</h4>
|
|
</a>
|
|
|
|
<a onClick={ev => {
|
|
ev.preventDefault();
|
|
setOpen(!open);
|
|
}}>
|
|
<Menu />
|
|
</a>
|
|
<MenuView open={open} setOpen={setOpen} />
|
|
</nav>
|
|
);
|
|
}
|
|
|
|
// TODO: create menu modal
|
|
function MenuView({ open, setOpen }: { open: boolean; setOpen: (value: boolean) => void }) {
|
|
return (
|
|
<div className={`ka-menu ${open ? "open" : ""}`}>
|
|
<a onClick={ev => {
|
|
ev.preventDefault();
|
|
setOpen(false);
|
|
}}>
|
|
<PanelLeftClose />
|
|
<span>Close</span>
|
|
</a>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|