cf70e2af21
refactor notifications popover to include unread count, mark all as read button, and loading state ```
30 lines
769 B
TypeScript
30 lines
769 B
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import Tooltip from '@mui/material/Tooltip';
|
|
import { EnvelopeSimple as EnvelopeSimpleIcon } from '@phosphor-icons/react/dist/ssr/EnvelopeSimple';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
export function MarkAllAsReadButton({
|
|
onMarkAllAsRead,
|
|
disabled,
|
|
}: {
|
|
onMarkAllAsRead: (() => void) | undefined;
|
|
disabled: boolean;
|
|
}): React.JSX.Element {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Tooltip title={t('mark-all-as-read')}>
|
|
<IconButton
|
|
edge="end"
|
|
onClick={onMarkAllAsRead}
|
|
disabled={disabled}
|
|
>
|
|
<EnvelopeSimpleIcon color={disabled ? 'lightgray' : 'black'} />
|
|
</IconButton>
|
|
</Tooltip>
|
|
);
|
|
}
|