shoc-frontend-new/src/app/(protected)/notifications/index.tsx

import { Box } from "@mui/material";
import { NotificationFeedActions } from "@/components/notifications/notification-feed-actions";
import { NotificationFeedList } from "@/components/notifications/notification-feed-list";
import { useNotificationCenter } from "@/components/notifications/use-notification-center";
import { PageHeader } from "@/components/ui/page-header";

export default function NotificationsPage() {
  const center = useNotificationCenter();

  return (
    <Box className="flex flex-col gap-2 p-2.5">
      <PageHeader
        surface
        title="Notifications"
        actions={
          <div className="flex items-center gap-3">
            <NotificationFeedActions center={center} />
          </div>
        }
      />
      <Box className="max-w-3xl px-5 pb-5">
        <NotificationFeedList center={center} />
      </Box>
    </Box>
  );
}