adding a nicer layout frame, setting up for pages

web/pages/_app.tsx

@@ -4,6 +4,8 @@
 import 'antd/dist/antd.dark.css';
 import 'antd/dist/antd.compact.css';
 
+import "../styles/globals.scss";
+
 import { AppProps } from 'next/app'
 
 function App({ Component, pageProps }: AppProps) {

web/pages/components/connected-clients.tsx

@@ -3,9 +3,6 @@ import { Table } from 'antd';
 
 import { CONNECTED_CLIENTS, fetchData, FETCH_INTERVAL } from '../utils/apis';
 
-export default function HardwareInfo() {
-  const [clients, setClients] = useState({});
-
 /*
 geo data looks like this
   "geo": {
@@ -15,6 +12,8 @@ geo data looks like this
   }
 */
 
+export default function HardwareInfo() {
+  const [clients, setClients] = useState([]);
   const getInfo = async () => {
     try {
       const result = await fetchData(CONNECTED_CLIENTS);
@@ -72,6 +71,7 @@ geo data looks like this
     },
   ];
   
+  console.log({clients})
   return (
     <div>
       <h2>Connected Clients</h2>

web/pages/home.tsx

@@ -1,65 +1,12 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
-import { Layout } from 'antd';
 
+import adminStyles from './components/styles.module.css';
 
-import BroadcastInfo from './components/broadcast-info';
-import HardwareInfo from './components/hardware-info';
-import ViewerInfo from './components/viewer-info';
-import ServerConfig from './components/server-config';
-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 /> */}
-    </>
-  ) : null;
-
-  const disconnectButton = broadcastActive ? <button type="button">Boot (Disconnect)</button> : null;
-
   return (
-    <Layout className="layout">
+    <div>
-      <Header>
+     &lt;  pick something
-        <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>
-
-          {disconnectButton}
-          <button type="button">Change Stream Key</button>
-          <button type="button">Server Config</button>
-
-          <br />
-          <br />
-
-          {broadcastDetails}
-
-
     </div>        
-      </Content>
-      <Footer style={{ textAlign: 'center' }}><a href="https://owncast.online/">About Owncast</a></Footer>
-    </Layout>
-
-    
-
   );
 }

web/pages/index2.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { BROADCASTER, fetchData, FETCH_INTERVAL } from './utils/apis';
-import Main from './home';
+import MainLayout from './components/main-layout';
+import Home from './home';
 
 export default function Admin() {
   const [broadcasterStatus, setBroadcasterStatus] = useState({});
@@ -35,6 +36,8 @@ export default function Admin() {
 
   
   return (
-    <Main {...broadcasterStatus} />
+    <MainLayout {...broadcasterStatus} >
+      <Home />
+    </MainLayout>
   );
 }

web/pages/utils/apis.ts

@@ -50,7 +50,6 @@ export async function fetchData(url) {
       const message = `An error has occured: ${response.status}`;
       throw new Error(message);
     }
-
     const json = await response.json();
     return json;
   } catch (error) {

web/styles/globals.scss

@@ -1,16 +1,25 @@
+$owncast-purple: rgba(90,103,216,1);;
+
 html,
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+
+  font-size: 16px;
 }
 
 a {
   color: inherit;
   text-decoration: none;
+  color: rgba(90,103,216,1);
 }
 
 * {
   box-sizing: border-box;
 }
+
+
+.owncast-layout .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected {
+  background-color: $owncast-purple;
+}