Add first pass for offline banner component

2022-05-25 22:52:27 -07:00
parent 281829a473
commit f041727f07
6 changed files with 70 additions and 10 deletions
@@ -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>
+  );
 }