Ambrose Liew

Notifications.tsx

import React from "react";
export default function Notifications() {
  const [notifications, setNotifications] = React.useState<
    { message: string; recent: boolean }[]
  >([]);
  const [showNotifications, setShowNotifications] = React.useState(false);
  return (
    <>
      <button
        className="border px-2 py-1 mb-2"
        onClick={() => {
          setNotifications([
            { message: `Notification #${notifications.length}`, recent: true },
            ...notifications,
          ]);
        }}
      >
        Add a notification!
      </button>
      <div className="relative z-10">
        <button
          onClick={() => setShowNotifications(!showNotifications)}
          className={`border rounded-full p-1 relative ${
            notifications.some((notification) => notification.recent === true)
              ? "after:content-['•'] after:absolute after:-top-3 after:right-0.5 after:text-3xl after:text-red-700"
              : ""
          }
          ${showNotifications ? "bg-gray-900" : ""}
          `}
        >
          🔔
        </button>
        {showNotifications && (
          <ul className="absolute max-h-60 overflow-y-auto">
            {notifications.map((notification) => (
              <li
                key={notification.message}
                className={`border px-2 py-1 bg-black ${
                  notification.recent ? "bg-gray-900" : ""
                }`}
                onMouseEnter={() =>
                  setNotifications(
                    notifications.map((n) =>
                      n === notification ? { ...n, recent: false } : n
                    )
                  )
                }
              >
                {notification.message}
              </li>
            ))}
          </ul>
        )}
      </div>
    </>
  );
}