import "./assets/less/common.less";
import { Route, Routes, useNavigate } from "react-router-dom";
import User from "./view/User";
import Home from "./view/Home";
import { Guard } from "./router/Guard";

function App() {
  const navigate = useNavigate();

  const routerList = [
    {
      path: "/",
      element: <Home />,
      name: "首页",
    },
    {
      path: "user",
      element: <User />,
      name: "用户",
    },
  ];

  return (
    <>
      <header>header</header>
      <div>
        <aside>
          <ul>
            {routerList.map((router) => (
              <li key={router.path}>
                <a onClick={() => navigate(router.path)}>{router.name}</a>
              </li>
            ))}
          </ul>
        </aside>
        <main>
          <Routes>
            {routerList.map((router) => (
              <Route
                key={router.path}
                path={router.path}
                element={<Guard>{router.element}</Guard>}
              />
            ))}
            <Route path="*" element={<span>404</span>} />
          </Routes>
        </main>
      </div>
    </>
  );
}

export default App;