initial commit

src/App.css

@@ -0,0 +1,24 @@
+*{
+  font-family: sans-serif;
+}
+
+.container{
+
+}
+
+.channel{
+
+}
+
+.children{
+  margin-left: 1rem
+}
+
+.clients{
+  margin-left: 1rem
+}
+
+.client{
+
+}
+

src/App.jsx

@@ -0,0 +1,25 @@
+import React, { useEffect, useState } from 'react';
+import './App.css';
+import Channel from './Channel';
+
+function App() {
+  let [status,setStatus] = useState([])
+
+  useEffect(()=>{
+    (async ()=>{
+      const res = await fetch("https://node.kapelle.org/pub/ts3");
+      const json = await res.json();
+      setStatus(json);
+    })();
+  },[]);
+
+  return (
+    <div className="container">
+      {status.map(c => {
+        return <Channel channel={c} />
+      })}
+    </div>
+  );
+}
+
+export default App;

src/Channel.jsx

@@ -0,0 +1,37 @@
+import React from "react"
+
+function userIcon(client) {
+    if (client.muted) {
+        return "🔇"
+    }
+    
+    if (client.micMuted) {
+        return "🎤"
+    }
+    
+    return "👤"
+}
+
+function Channel(props) {
+    return (
+        <div className="channel">
+            <div>
+                ✅ {props.channel.name}
+            </div>
+            <div className="clients">
+                {props.channel.clients.map(c =>{
+                    return <div key={c.nickname} className="client">
+                        {userIcon(c)} {c.nickname}
+                    </div>
+                })}
+            </div>
+            <div className="children">
+                {props.channel.children.map(c => {
+                    return <Channel channel={c} />
+                })}
+            </div>
+        </div>
+    )
+}
+
+export default Channel

src/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);