aah/client/Root.tsx
2023-08-07 18:36:33 -05:00

44 lines
1.2 KiB
TypeScript

import { Link, Outlet, useNavigate } from "react-router-dom";
import styles from "./Root.module.scss";
import { useQuery } from "react-query";
import { MenuItem } from "@blueprintjs/core";
import { getServices } from "./lib/api";
export default function Root() {
const navigate = useNavigate();
const servicesQuery = useQuery("service/list", getServices);
if (servicesQuery.status !== "success") {
console.log("SHIET", servicesQuery);
return <>Loading...</>;
}
return (
<div className={styles.container}>
<div className={styles.sidebar}>
<h1 style={{ margin: "6px" }}>
<Link to="/">aah</Link>
</h1>
<small>"no honey, we have aws at home" ~mom</small>
<hr />
<p>Services:</p>
{servicesQuery.data.map((service) => {
let icon;
if (service.status === "New") {
icon = "clean";
}
const text = `${service.name} (${service.id})`;
const goto = () => navigate(`/service/${service.id}`);
return (
<MenuItem icon={icon} text={text} key={service.id} onClick={goto} />
);
})}
</div>
<div className={styles.mainContent}>
<Outlet />
</div>
</div>
);
}