restructured components folders and layout (#1886)

web/components/ui/Content/Content.tsx

@@ -0,0 +1,26 @@
+import { useRecoilValue } from 'recoil';
+import { clientConfigState } from '../../stores/ClientConfigStore';
+import { ClientConfig } from '../../../interfaces/client-config.model';
+import { Layout, Row, Col } from 'antd';
+
+const { Content } = Layout;
+
+export default function FooterComponent() {
+  const clientConfig = useRecoilValue<ClientConfig>(clientConfigState);
+  const { extraPageContent } = clientConfig;
+
+  return (
+    <Content style={{ margin: '80px 16px 0', overflow: 'initial' }}>
+      <div>
+        <Row>
+          <Col span={24}>Video player goes here</Col>
+        </Row>
+        <Row>
+          <Col span={24}>
+            <Content dangerouslySetInnerHTML={{ __html: extraPageContent }} />
+          </Col>
+        </Row>
+      </div>
+    </Content>
+  );
+}

web/components/ui/Content/index.ts

@@ -0,0 +1 @@
+export { default } from "./Content"

web/components/ui/Footer/Footer.tsx

@@ -0,0 +1,13 @@
+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;
+
+  return <Footer style={{ textAlign: 'center' }}>Footer: Owncast {version}</Footer>;
+}

web/components/ui/Footer/index.ts

@@ -0,0 +1 @@
+export { default } from './Footer';

web/components/ui/Header/Header.module.scss

@@ -0,0 +1,4 @@
+.header {
+  @apply fixed w-full bg-red;
+  z-index: 1;
+}

web/components/ui/Header/Header.tsx

@@ -0,0 +1,31 @@
+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';
+
+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]);
+
+  return (
+    <Header className={`${s.header}`}>
+      {name}
+      <button onClick={() => setChatOpen(!chatOpen)}>Toggle Chat</button>
+    </Header>
+  );
+}

web/components/ui/Header/index.ts

@@ -0,0 +1 @@
+export { default } from './Header';

web/components/ui/Sidebar/Sidebar.tsx

@@ -0,0 +1,19 @@
+import Sider from 'antd/lib/layout/Sider';
+import { useRecoilValue } from 'recoil';
+import { chatCurrentlyVisible } from '../../stores/ClientConfigStore';
+
+export default function Sidebar() {
+  let chatOpen = useRecoilValue(chatCurrentlyVisible);
+  return (
+    <Sider
+      collapsed={!chatOpen}
+      width={300}
+      style={{
+        position: 'fixed',
+        right: 0,
+        top: 0,
+        bottom: 0,
+      }}
+    />
+  );
+}

web/components/ui/Sidebar/index.ts

@@ -0,0 +1 @@
+export { default } from './Sidebar';

web/components/ui/index.tsx

@@ -0,0 +1,4 @@
+export { default as Header } from './Header/index'
+export { default as Sidebar } from './Sidebar/index'
+export { default as Footer } from './Footer/index'
+export { default as Content } from './Content/index'