Add logo component and social links

web/components/ui/Content/Content.tsx

@@ -1,5 +1,5 @@
 import { useRecoilValue } from 'recoil';
-import { Layout, Button, Tabs } from 'antd';
+import { Layout, Button, Tabs, Typography } from 'antd';
 import {
   chatVisibilityAtom,
   clientConfigStateAtom,
@@ -23,9 +23,13 @@ import ActionButton from '../../action-buttons/ActionButton';
 import Statusbar from '../Statusbar/Statusbar';
 import { ServerStatus } from '../../../interfaces/server-status.model';
 import { Follower } from '../../../interfaces/follower';
+import SocialLinks from '../SocialLinks/SocialLinks';
+import NotifyReminderPopup from '../NotifyReminderPopup/NotifyReminderPopup';
+import ServerLogo from '../Logo/Logo';
 
 const { TabPane } = Tabs;
 const { Content } = Layout;
+const { Title } = Typography;
 
 export default function ContentComponent() {
   const status = useRecoilValue<ServerStatus>(serverStatusState);
@@ -34,7 +38,7 @@ export default function ContentComponent() {
   const messages = useRecoilValue<ChatMessage[]>(chatMessagesAtom);
   const chatState = useRecoilValue<ChatState>(chatStateAtom);
 
-  const { extraPageContent, version } = clientConfig;
+  const { extraPageContent, version, socialHandles, name, title, tags } = clientConfig;
   const { online, viewerCount, lastConnectTime, lastDisconnectTime } = status;
 
   const followers: Follower[] = [];
@@ -73,26 +77,31 @@ export default function ContentComponent() {
         <ActionButtonRow>
           {externalActionButtons}
           <Button>Follow</Button>
-          <Button>Notify</Button>
+          <NotifyReminderPopup visible notificationClicked={() => {}} notificationClosed={() => {}}>
+            <Button>Notify</Button>
+          </NotifyReminderPopup>
         </ActionButtonRow>
 
         <div className={`${s.lowerRow}`}>
-          <Tabs defaultActiveKey="1" type="card">
+          <ServerLogo />
+          <Title level={2}>{name}</Title>
+          {online && title !== '' && <Title level={3}>{title}</Title>}
+          <div>{tags.length > 0 && tags.map(tag => <span key={tag}>#{tag}&nbsp;</span>)}</div>
+          <Tabs defaultActiveKey="1">
             <TabPane tab="About" key="1" className={`${s.pageContentSection}`}>
+              <SocialLinks links={socialHandles} />
               <CustomPageContent content={extraPageContent} />
             </TabPane>
             <TabPane tab="Followers" key="2" className={`${s.pageContentSection}`}>
               <FollowerCollection total={total} followers={followers} />
             </TabPane>
           </Tabs>
-
           {chatVisibility && (
             <div className={`${s.mobileChat}`}>
               <ChatContainer messages={messages} state={chatState} />
               <ChatTextField />
             </div>
           )}
-
           <Footer version={version} />
         </div>
       </div>

web/components/ui/Footer/Footer.tsx

@@ -9,5 +9,9 @@ interface Props {
 export default function FooterComponent(props: Props) {
   const { version } = props;
 
-  return <Footer style={{ textAlign: 'center', height: '64px' }}>Owncast {version}</Footer>;
+  return (
+    <Footer style={{ textAlign: 'center', height: '64px' }}>
+      <a href="https://owncast.online">{version}</a>
+    </Footer>
+  );
 }

web/components/ui/Logo/Logo.module.scss

@@ -0,0 +1,9 @@
+.logo {
+  width: 120px;
+  border-radius: 50%;
+  border-width: 3px;
+  border-style: solid;
+  border-color: var(--theme-primary-color);
+  background-color: var(--theme-background-secondary);
+  padding: 3px;
+}

web/components/ui/Logo/Logo.tsx

@@ -0,0 +1,5 @@
+import s from './Logo.module.scss';
+
+export default function SocialLinks() {
+  return <img className={s.logo} src="/logo" alt="logo" />;
+}

web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx

@@ -5,7 +5,7 @@ import s from './NotifyReminderPopup.module.scss';
 
 interface Props {
   visible: boolean;
-  children: React.ReactNode[];
+  children: React.ReactNode;
   notificationClicked: () => void;
   notificationClosed: () => void;
 }

web/components/ui/SocialLinks/SocialLinks.module.scss

@@ -0,0 +1,11 @@
+.link {
+  width: 2em;
+  margin-left: 4px;
+  margin-right: 4px;
+}
+
+.links {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}

web/components/ui/SocialLinks/SocialLinks.tsx

@@ -0,0 +1,21 @@
+import { SocialLink } from '../../../interfaces/social-link.model';
+import s from './SocialLinks.module.scss';
+
+interface Props {
+  // eslint-disable-next-line react/no-unused-prop-types
+  links: SocialLink[];
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export default function SocialLinks(props: Props) {
+  const { links } = props;
+  return (
+    <div className={s.links}>
+      {links.map(link => (
+        <a key={link.platform} href={link.url} className={s.link} target="_blank" rel="noreferrer">
+          <img src={link.icon} alt={link.platform} title={link.platform} className={s.link} />
+        </a>
+      ))}
+    </div>
+  );
+}