Update the offline banner. Filed #2179 to discuss text

web/components/ui/OfflineBanner/OfflineBanner.tsx

@@ -1,26 +1,58 @@
-import { Divider, Button } from 'antd';
-import { NotificationFilled } from '@ant-design/icons';
+import { Divider } from 'antd';
+import { ClockCircleOutlined } from '@ant-design/icons';
 import { FC } from 'react';
+import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import styles from './OfflineBanner.module.scss';
+import { FollowButton } from '../../action-buttons/FollowButton';
+import { NotifyButton } from '../../action-buttons/NotifyButton';
 
 export type OfflineBannerProps = {
-  title: string;
-  text: string;
+  streamName: string;
+  customText?: string;
+  lastLive?: Date;
+  notificationsEnabled: boolean;
+  fediverseAccount?: string;
+  onNotifyClick?: () => void;
 };
 
-export const OfflineBanner: FC<OfflineBannerProps> = ({ title, text }) => (
-  <div className={styles.outerContainer}>
-    <div className={styles.innerContainer}>
-      <div className={styles.header}>{title}</div>
-      <Divider />
-      <div>{text}</div>
+export const OfflineBanner: FC<OfflineBannerProps> = ({
+  streamName,
+  customText,
+  lastLive,
+  notificationsEnabled,
+  fediverseAccount,
+  onNotifyClick,
+}) => {
+  let text;
+  if (customText) {
+    text = customText;
+  } else if (!customText && notificationsEnabled && fediverseAccount) {
+    text = `This stream is offline. You can be notified the next time ${streamName} goes live or follow ${fediverseAccount} on the Fediverse.`;
+  } else if (!customText && notificationsEnabled) {
+    text = `This stream is offline. Be notified the next time ${streamName} goes live.`;
+  } else {
+    text = `This stream is offline. Check back soon!`;
+  }
 
-      <div className={styles.footer}>
-        <Button type="primary" onClick={() => console.log('show notification modal')}>
-          <NotificationFilled />
-          Notify when Live
-        </Button>
+  return (
+    <div className={styles.outerContainer}>
+      <div className={styles.innerContainer}>
+        <div className={styles.header}>{streamName}</div>
+        <Divider className={styles.separator} />
+        <div className={styles.bodyText}>{text}</div>
+        {lastLive && (
+          <div className={styles.lastLiveDate}>
+            <ClockCircleOutlined className={styles.clockIcon} />
+            {`Last live ${formatDistanceToNow(new Date(lastLive))} ago.`}
+          </div>
+        )}
+
+        <div className={styles.footer}>
+          {fediverseAccount && <FollowButton />}
+
+          {notificationsEnabled && <NotifyButton onClick={onNotifyClick} />}
+        </div>
       </div>
     </div>
-  </div>
-);
+  );
+};