More blank components and stories to be filled in

web/components/ui/Content/Content.tsx

@@ -1,7 +1,12 @@
 import { useRecoilValue } from 'recoil';
+import { Layout, Row, Col, Tabs } from 'antd';
 import { clientConfigState } from '../../stores/ClientConfigStore';
 import { ClientConfig } from '../../../interfaces/client-config.model';
-import { Layout, Row, Col } from 'antd';
+import CustomPageContent from '../../CustomPageContent';
+import OwncastPlayer from '../../video/OwncastPlayer';
+import FollowerCollection from '../../FollowersCollection';
+
+const { TabPane } = Tabs;
 
 const { Content } = Layout;
 
@@ -13,11 +18,20 @@ export default function FooterComponent() {
     <Content style={{ margin: '80px 16px 0', overflow: 'initial' }}>
       <div>
         <Row>
-          <Col span={24}>Video player goes here</Col>
+          <Col span={24}>
+            <OwncastPlayer source="https://watch.owncast.online" />
+          </Col>
         </Row>
         <Row>
           <Col span={24}>
-            <Content dangerouslySetInnerHTML={{ __html: extraPageContent }} />
+            <Tabs defaultActiveKey="1" type="card">
+              <TabPane tab="About" key="1">
+                <CustomPageContent content={extraPageContent} />
+              </TabPane>
+              <TabPane tab="Followers" key="2">
+                <FollowerCollection />
+              </TabPane>
+            </Tabs>
           </Col>
         </Row>
       </div>

web/components/ui/Footer/Footer.tsx

@@ -1,13 +1,9 @@
-import { useRecoilValue } from 'recoil';
-import { clientConfigState } from '../../stores/ClientConfigStore';
-import { ClientConfig } from '../../../interfaces/client-config.model';
 import { Layout } from 'antd';
 
 const { Footer } = Layout;
 
-export default function FooterComponent() {
-  const clientConfig = useRecoilValue<ClientConfig>(clientConfigState);
-  const { version } = clientConfig;
+export default function FooterComponent(props) {
+  const { version } = props;
 
   return <Footer style={{ textAlign: 'center' }}>Footer: Owncast {version}</Footer>;
 }

web/components/ui/Header/Header.tsx

@@ -1,31 +1,17 @@
-import s from './Header.module.scss';
 import { Layout } from 'antd';
-import { ServerStatusStore, serverStatusState } from '../../stores/ServerStatusStore';
-import {
-  ClientConfigStore,
-  clientConfigState,
-  chatCurrentlyVisible,
-} from '../../stores/ClientConfigStore';
-import { ClientConfig } from '../../../interfaces/client-config.model';
-import { useRecoilState, useRecoilValue } from 'recoil';
-import { useEffect } from 'react';
+import UserDropdown from '../../UserDropdownMenu';
+import s from './Header.module.scss';
 
 const { Header } = Layout;
 
-export default function HeaderComponent() {
-  const clientConfig = useRecoilValue<ClientConfig>(clientConfigState);
-  const [chatOpen, setChatOpen] = useRecoilState(chatCurrentlyVisible);
-
-  const { name } = clientConfig;
-
-  useEffect(() => {
-    console.log({ chatOpen });
-  }, [chatOpen]);
+export default function HeaderComponent(props) {
+  const { name } = props;
 
   return (
     <Header className={`${s.header}`}>
+      Logo goes here
       {name}
-      <button onClick={() => setChatOpen(!chatOpen)}>Toggle Chat</button>
+      <UserDropdown />
     </Header>
   );
 }

web/components/ui/Sidebar/Sidebar.tsx

@@ -1,12 +1,15 @@
 import Sider from 'antd/lib/layout/Sider';
 import { useRecoilValue } from 'recoil';
-import { chatCurrentlyVisible } from '../../stores/ClientConfigStore';
+import { ChatMessage } from '../../../interfaces/chat-message.model';
+import ChatContainer from '../../chat/ChatContainer';
+import { chatMessages } from '../../stores/ClientConfigStore';
 
 export default function Sidebar() {
-  let chatOpen = useRecoilValue(chatCurrentlyVisible);
+  const messages = useRecoilValue<ChatMessage[]>(chatMessages);
+
   return (
     <Sider
-      collapsed={!chatOpen}
+      collapsed={false}
       width={300}
       style={{
         position: 'fixed',
@@ -14,6 +17,8 @@ export default function Sidebar() {
         top: 0,
         bottom: 0,
       }}
-    />
+    >
+      <ChatContainer messages={messages} />
+    </Sider>
   );
 }