More blank components and stories to be filled in

web/components/CustomPageContent.tsx

@@ -4,5 +4,5 @@ interface Props {
 
 export default function CustomPageContent(props: Props) {
   const { content } = props;
-  return <div>{content}</div>;
+  return <div dangerouslySetInnerHTML={{ __html: content }} />;
 }

web/components/Follower.tsx

@@ -0,0 +1,9 @@
+import { Follower } from '../interfaces/follower';
+
+interface Props {
+  follower: Follower;
+}
+
+export default function FollowerCollection(props: Props) {
+  return <div>This is a single follower</div>;
+}

web/components/FollowersCollection.tsx

@@ -0,0 +1,9 @@
+import { Follower } from '../interfaces/follower';
+
+interface Props {
+  followers: Follower[];
+}
+
+export default function FollowerCollection(props: Props) {
+  return <div>List of followers go here</div>;
+}

web/components/chat/ChatContainer.tsx

@@ -5,5 +5,5 @@ interface Props {
 }
 
 export default function ChatContainer(props: Props) {
-  return <div>Component goes here</div>;
+  return <div>Chat container goes here</div>;
 }

web/components/stores/ClientConfigStore.tsx

@@ -3,6 +3,7 @@ import { ReactElement } from 'react-markdown/lib/react-markdown';
 import { atom, useRecoilState } from 'recoil';
 import { makeEmptyClientConfig, ClientConfig } from '../../interfaces/client-config.model';
 import ClientConfigService from '../../services/client-config-service';
+import { ChatMessage } from '../../interfaces/chat-message.model';
 
 // The config that comes from the API.
 export const clientConfigState = atom({
@@ -15,11 +16,16 @@ export const chatCurrentlyVisible = atom({
   default: false,
 });
 
-export const chatDislayName = atom({
+export const chatDisplayName = atom({
   key: 'chatDisplayName',
   default: '',
 });
 
+export const chatMessages = atom({
+  key: 'chatMessages',
+  default: [] as ChatMessage[],
+});
+
 export function ClientConfigStore(): ReactElement {
   const [, setClientConfig] = useRecoilState<ClientConfig>(clientConfigState);
 

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>
   );
 }