lbry-desktop/ui/component/notificationBubble/view.jsx

35 lines
772 B
React
Raw Normal View History

2020-08-10 22:47:39 +02:00
// @flow
import React from 'react';
2020-08-11 22:32:03 +02:00
import classnames from 'classnames';
2020-08-10 22:47:39 +02:00
type Props = {
unreadCount: number,
2020-08-11 22:32:03 +02:00
inline: boolean,
user: ?User,
2020-08-10 22:47:39 +02:00
};
export default function NotificationHeaderButton(props: Props) {
2020-08-11 22:32:03 +02:00
const { unreadCount, inline = false, user } = props;
const notificationsEnabled = user && user.experimental_ui;
2020-08-10 22:47:39 +02:00
2020-08-11 22:32:03 +02:00
if (unreadCount === 0 || !notificationsEnabled) {
2020-08-10 22:47:39 +02:00
return null;
}
return (
2020-08-11 22:32:03 +02:00
<span
className={classnames('notification__bubble', {
'notification__bubble--inline': inline,
})}
>
<span
className={classnames('notification__count', {
'notification__bubble--small': unreadCount > 9,
})}
>
{unreadCount > 20 ? '20+' : unreadCount}
</span>
2020-08-10 22:47:39 +02:00
</span>
);
}