5 changed files with 147 additions and 43 deletions
@ -1,26 +1,58 @@
@@ -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> |
||||
); |
||||
); |
||||
}; |
||||
|
Loading…
Reference in new issue