tmp

src/pages/providers/index.tsx

@@ -0,0 +1,57 @@
+import "./index.css";
+import { StreamProviders } from "providers";
+
+import Owncast from "owncast.png";
+import Cloudflare from "cloudflare.png";
+import { useNavigate, useParams } from "react-router-dom";
+import { ConfigureOwncast } from "./owncast";
+
+export function StreamProvidersPage() {
+    const navigate = useNavigate();
+    const { id } = useParams();
+
+    function mapName(p: StreamProviders) {
+        switch (p) {
+            case StreamProviders.Owncast: return "Owncast"
+            case StreamProviders.Cloudflare: return "Cloudflare"
+        }
+        return "Unknown"
+    }
+
+    function mapLogo(p: StreamProviders) {
+        switch (p) {
+            case StreamProviders.Owncast: return <img src={Owncast} />
+            case StreamProviders.Cloudflare: return <img src={Cloudflare} />
+        }
+    }
+
+    function providerLink(p: StreamProviders) {
+        return <div className="paper">
+            <h3>{mapName(p)}</h3>
+            {mapLogo(p)}
+            <button className="btn btn-border" onClick={() => navigate(p)}>
+                + Configure
+            </button>
+        </div>
+    }
+
+    function index() {
+        return <div className="stream-providers-page">
+            <h1>Providers</h1>
+            <p>Stream providers streamline the process of streaming on Nostr, some event accept lightning payments!</p>
+            <div className="stream-providers-grid">
+                {[StreamProviders.Owncast, StreamProviders.Cloudflare].map(v => providerLink(v))}
+            </div>
+        </div >
+    }
+
+    if (!id) {
+        return index();
+    } else {
+        switch (id) {
+            case StreamProviders.Owncast: {
+                return <ConfigureOwncast />
+            }
+        }
+    }
+}