more react scaffolding; basic api calls (#724)

This commit is contained in:
Michael Quigley 2024-11-20 14:18:55 -05:00
parent 4b4522790d
commit f394074d5c
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
4 changed files with 29 additions and 10 deletions

View File

@ -8,7 +8,7 @@
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>zrok Console UI</title> <title>zrok API Console</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

26
ui100/src/ApiConsole.tsx Normal file
View File

@ -0,0 +1,26 @@
import {useEffect, useState} from "react";
import {MetadataApi} from "./api";
const ApiConsole = () => {
const [version, setVersion] = useState("no version set");
useEffect(() => {
let api = new MetadataApi();
api.version()
.then(d => {
setVersion(d);
})
.catch(e => {
console.log(e);
});
}, []);
return (
<div>
<h1>zrok</h1>
<h2>{version}</h2>
</div>
);
}
export default ApiConsole;

View File

@ -1,7 +0,0 @@
const Console = () => {
return (
<h1>zrok</h1>
);
}
export default Console;

View File

@ -1,14 +1,14 @@
import "./index.css"; import "./index.css";
import {StrictMode} from "react"; import {StrictMode} from "react";
import {createRoot} from "react-dom/client"; import {createRoot} from "react-dom/client";
import Console from "./Console.tsx"; import ApiConsole from "./ApiConsole.tsx";
import {ThemeProvider} from "@mui/material"; import {ThemeProvider} from "@mui/material";
import {theme} from "./model/theme.ts"; import {theme} from "./model/theme.ts";
createRoot(document.getElementById('root')!).render( createRoot(document.getElementById('root')!).render(
<StrictMode> <StrictMode>
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<Console /> <ApiConsole />
</ThemeProvider> </ThemeProvider>
</StrictMode> </StrictMode>
); );