build ok,

002_source/cms/src/components/dashboard/layout/notifications-popover.tsx

@@ -15,6 +15,7 @@ import { ChatText as ChatTextIcon } from '@phosphor-icons/react/dist/ssr/ChatTex
 import { EnvelopeSimple as EnvelopeSimpleIcon } from '@phosphor-icons/react/dist/ssr/EnvelopeSimple';
 import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
 import { X as XIcon } from '@phosphor-icons/react/dist/ssr/X';
+import { useTranslation } from 'react-i18next';
 
 import { dayjs } from '@/lib/dayjs';
 
@@ -73,6 +74,7 @@ export function NotificationsPopover({
   onRemoveOne,
   open = false,
 }: NotificationsPopoverProps): React.JSX.Element {
+  const { t } = useTranslation();
   return (
     <Popover
       anchorEl={anchorEl}
@@ -83,8 +85,8 @@ export function NotificationsPopover({
       transformOrigin={{ horizontal: 'right', vertical: 'top' }}
     >
       <Stack direction="row" spacing={2} sx={{ alignItems: 'center', justifyContent: 'space-between', px: 3, py: 2 }}>
-        <Typography variant="h6">Notifications</Typography>
-        <Tooltip title="Mark all as read">
+        <Typography variant="h6">{t('Notifications')}</Typography>
+        <Tooltip title={t('Mark all as read')}>
           <IconButton edge="end" onClick={onMarkAllAsRead}>
             <EnvelopeSimpleIcon />
           </IconButton>
@@ -92,7 +94,7 @@ export function NotificationsPopover({
       </Stack>
       {notifications.length === 0 ? (
         <Box sx={{ p: 2 }}>
-          <Typography variant="subtitle2">There are no notifications</Typography>
+          <Typography variant="subtitle2">{t('There are no notifications')}</Typography>
         </Box>
       ) : (
         <Box sx={{ maxHeight: '270px', overflowY: 'auto' }}>