```

refactor notifications popover to use new hooks and improve functionality
```

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

@@ -0,0 +1,36 @@
+'use client';
+
+import * as React from 'react';
+import type { Notification } from '@/db/Notifications/type';
+import IconButton from '@mui/material/IconButton';
+import ListItem from '@mui/material/ListItem';
+import Tooltip from '@mui/material/Tooltip';
+import { X as XIcon } from '@phosphor-icons/react/dist/ssr/X';
+
+import { NotificationContent } from './notification-content';
+
+interface NotificationItemProps {
+  divider?: boolean;
+  notification: Notification;
+  onRemove?: () => void;
+}
+
+export function NotificationItem({ divider, notification, onRemove }: NotificationItemProps): React.JSX.Element {
+  return (
+    <ListItem
+      divider={divider}
+      sx={{ alignItems: 'flex-start', justifyContent: 'space-between' }}
+    >
+      <NotificationContent notification={notification} />
+      <Tooltip title="Remove">
+        <IconButton
+          edge="end"
+          onClick={onRemove}
+          size="small"
+        >
+          <XIcon />
+        </IconButton>
+      </Tooltip>
+    </ListItem>
+  );
+}