version page first draft.

src/Version.tsx

@@ -1,45 +1,48 @@
 import { AppNav, Footer } from "./AppNav.tsx";
-import { Container, Row, Col, Image } from "react-bootstrap";
-import { atom, useAtom } from 'jotai';
-import { atomWithQuery } from 'jotai-tanstack-query';
+import { Container, Row, Col, Card } from "react-bootstrap";
+import { atom, useAtom } from "jotai";
+import { atomWithQuery } from "jotai-tanstack-query";
+import YAML from "yaml";
 
 const versionQueryFn = async () => {
-    const resp = await fetch("api/build_info");
-    if(!resp.ok) {
-        throw new Error('Network response was not ok')
-    }
-    console.log(resp);
-    return resp.json();
-}
+  const resp = await fetch("api/build_info");
+  if (!resp.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return resp.json();
+};
 
-const versionAtom = atomWithQuery( () =>
-    ({
-        queryKey: ["version"],
-        queryFn: versionQueryFn,
-    })
-);
+const versionAtom = atomWithQuery(() => ({
+  queryKey: ["version"],
+  queryFn: versionQueryFn,
+}));
 
 export function Version() {
   const [{ data, isPending, isError }] = useAtom(versionAtom);
 
-    let versionText = () => {
-        if(isPending) {
-            return "Loading...";
-        }
-        if(isError) {
-            return "Error loading!";
-        }
-        return JSON.stringify(data);
-    };
-
+  let versionText = () => {
+    if (isPending) {
+      return "Loading...";
+    }
+    if (isError) {
+      return "Error loading!";
+    }
+    if (!data.status) {
+      return "Can not find version";
+    }
+    return YAML.stringify(data.message);
+  };
 
   return (
     <div>
       <AppNav />
-      <Container>
-          <p>
-          {versionText()}
-          </p>
+      <Container className="vert-padded">
+        <Card className="padded">
+          <Card.Title>project.yaml</Card.Title>
+          <Card.Body>
+            <pre>{versionText()}</pre>
+          </Card.Body>
+        </Card>
       </Container>
       <Footer />
     </div>