Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | 2x 7x 7x 7x 21x 7x 7x 11x 3x | import { FC, useState } from "react";
import { useGetSystemNotifs } from "@/api";
export const LatestUpdates: FC = () => {
const [showMore, setShowMore] = useState(false);
const { allNotifications } = useGetSystemNotifs();
Iif (!allNotifications.length) return null;
const latestUpdates = allNotifications.filter((notif) => notif.header === "Latest Updates");
const updateMeta: Record<string, { title: string; date: string }> = {
"9e38a211-5fd5-44ff-96cd-6d0a22a73a96": {
date: "11-12-24",
title: "MMDL SPA forms available in OneMAC",
},
"9e38a211-5fd5-44ff-96cd-6d0a22a73a97": {
date: "11-10-24",
title: "Update 2",
},
"9e38a211-5fd5-44ff-96cd-6d0a22a73a98": {
date: "11-05-24",
title: "Update 3",
},
};
const visibleUpdates = showMore ? latestUpdates : latestUpdates.slice(0, 1);
return (
<div className="flex flex-col gap-[16px] pb-[18px]">
<h2 className="text-2xl font-bold font-serif">Latest Updates</h2>
<ul className="list-none pl-2">
{visibleUpdates.map((notif) => {
const meta = updateMeta[notif.notifId] || { date: "", title: "" };
return (
<li
key={notif.notifId}
className="pb-8 relative pl-4 before:content-['•'] before:absolute before:left-0 before:text-sm before:top-1.5 before:leading-none text-[18px]"
>
<span>
{meta.date} <span className="text-[#0071bc] font-semibold">{meta.title}</span>:
</span>
{notif.buttonLink && (
<button
className="text-[#0071bc] underline ml-1"
onClick={() => (window.location.href = notif.buttonLink)}
>
→
</button>
)}{" "}
{notif.body}
</li>
);
})}
</ul>
{latestUpdates.length > 1 && (
<button
onClick={() => setShowMore(!showMore)}
className="flex items-center justify-start gap-2 rounded-md bg-transparent cursor-pointer"
>
<span className="pl-4 font-bold text-[#0071bc] leading-[22px] text-center">
{showMore ? "Hide additional updates" : "Show more updates"}
</span>
<svg
className="w-[24px] h-[24px] text-[#0071bc]"
fill="none"
stroke="currentColor"
strokeWidth="2"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d={showMore ? "M20 12H4" : "M12 4v16m8-8H4"}
/>
</svg>
</button>
)}
</div>
);
};
|