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

34 lines
772 B
JavaScript

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