Experiment with a new releases/upgrade page

web/pages/upgrade.tsx

@@ -0,0 +1,88 @@
+import React, { useState, useEffect } from "react";
+import ReactMarkdown from "react-markdown";
+import { Table, Tag } from "antd";
+
+const API_URL = "https://api.github.com/repos/owncast/owncast/releases/latest";
+
+export default function Logs() {
+  const [release, setRelease] = useState({
+    html_url: "",
+    name: "",
+    created_at: null,
+    body: "",
+    assets: [],
+    
+  });
+
+  const getRelease = async () => {
+    try {
+      const result = await fetchData(API_URL);
+      setRelease(result);
+    } catch (error) {
+      console.log("==== error", error);
+    }
+  };
+
+  useEffect(() => {
+    getRelease();
+  }, []);
+
+  if (!release) {
+    return null;
+  }
+
+  return (
+    <div>
+      <h2>
+        <a href={release.html_url}>{release.name}</a>
+      </h2>
+      <h1>{release.created_at}</h1>
+      <ReactMarkdown>{release.body}</ReactMarkdown>;
+
+      <h3>Downloads</h3>
+      <AssetTable {...release.assets} />
+    </div>
+  );
+}
+
+function AssetTable(assets) {
+  const data = [];
+
+  for (const key in assets) {
+    data.push(assets[key]);
+  }
+
+  const columns = [
+    {
+      title: "Name",
+      dataIndex: "name",
+      key: "name",
+      render: (text, entry) =>
+        `<a href="${entry.browser_download_url}">${text}</a>`,
+    },
+    {
+      title: "Size",
+      dataIndex: "size",
+      key: "size",
+      render: (text, entry) =>
+        `${(text/1024/1024).toFixed(2)} MB`
+    },
+  ];
+
+  return <Table dataSource={data} columns={columns} rowKey="id" />;
+}
+
+async function fetchData(url) {
+  try {
+    const response = await fetch(url);
+    if (!response.ok) {
+      const message = `An error has occured: ${response.status}`;
+      throw new Error(message);
+    }
+    const json = await response.json();
+    return json;
+  } catch (error) {
+    console.log(error);
+  }
+  return {};
+}