tables

web/pages/home.tsx

@@ -1,4 +1,6 @@
 import React, { useState, useEffect } from 'react';
+import { Layout } from 'antd';
+
 
 import BroadcastInfo from './components/broadcast-info';
 import HardwareInfo from './components/hardware-info';
@@ -9,35 +11,55 @@ import ConnectedClients from './components/connected-clients';
 export default function HomeView(props) {
   const { broadcastActive, broadcaster, message } = props;
 
+  const { Header, Footer, Content } = Layout;
+
   const broadcastDetails = broadcastActive ? (
     <>
       {/* <BroadcastInfo {...broadcaster} />
       <HardwareInfo /> */}
       <ViewerInfo />
-      {/* <ConnectedClients />
-      <ServerConfig /> */}
+      <ConnectedClients />
+      {/* <ServerConfig /> */}
     </>
   ) : null;
 
   const disconnectButton = broadcastActive ? <button type="button">Boot (Disconnect)</button> : null;
 
   return (
-    <div style={{ padding: '2em' }}>
-      <p>
-        <b>Status: {broadcastActive ? 'on' : 'off'}</b>
-      </p>
+    <Layout className="layout">
+      <Header>
+        <div className="logo">logo</div>
+        {/* <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
+          <Menu.Item key="1">nav 1</Menu.Item>
+          <Menu.Item key="2">nav 2</Menu.Item>
+          <Menu.Item key="3">nav 3</Menu.Item>
+        </Menu> */}
+      </Header>
+      <Content style={{ padding: '0 50px' }}>
+        <div className="site-layout-content">
+          <p>
+            <b>Status: {broadcastActive ? 'on' : 'off'}</b>
+          </p>
 
-      <h2>Utilities</h2>
-      <p>(these dont do anything yet)</p>
+          <h2>Utilities</h2>
+          <p>(these dont do anything yet)</p>
 
-      {disconnectButton}
-      <button type="button">Change Stream Key</button>
-      <button type="button">Server Config</button>
+          {disconnectButton}
+          <button type="button">Change Stream Key</button>
+          <button type="button">Server Config</button>
 
-      <br />
-      <br />
+          <br />
+          <br />
+
+          {broadcastDetails}
+
+
+        </div>
+      </Content>
+      <Footer style={{ textAlign: 'center' }}><a href="https://owncast.online/">About Owncast</a></Footer>
+    </Layout>
+
+    
 
-      {broadcastDetails}
-    </div>
   );
 }