Add first pass for offline banner component

web/components/ui/OfflineBanner/OfflineBanner.module.scss

@@ -0,0 +1,23 @@
+.outerContainer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.innerContainer {
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  background-color: var(--theme-background-secondary);
+  margin: 2vw;
+  border-radius: var(--theme-rounded-corners);
+  padding: 25px;
+}
+
+.header {
+  font-weight: bold;
+}
+
+.footer {
+  margin-top: 20px;
+}

web/components/ui/OfflineBanner/OfflineBanner.tsx

@@ -1,9 +1,32 @@
-// import s from './OfflineBanner.module.scss';
+import { Divider, Button } from 'antd';
+import { NotificationFilled } from '@ant-design/icons';
+
+import s from './OfflineBanner.module.scss';
 
 interface Props {
+  name: string;
   text: string;
 }
 
-export default function OfflineBanner({ text }: Props) {
-  return <div>{text}</div>;
+export default function OfflineBanner({ name, text }: Props) {
+  const handleShowNotificationModal = () => {
+    console.log('show notification modal');
+  };
+
+  return (
+    <div className={s.outerContainer}>
+      <div className={s.innerContainer}>
+        <div className={s.header}>{name} is currently offline.</div>
+        <Divider />
+        <div>{text}</div>
+
+        <div className={s.footer}>
+          <Button onClick={handleShowNotificationModal}>
+            <NotificationFilled />
+            Notify when Live
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
 }