"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface NotificationCenterItem {
  id: string;
  title: string;
  description?: string;
  time?: string;
  read?: boolean;
}

export interface NotificationCenterProps
  extends React.HTMLAttributes<HTMLDivElement> {
  items?: NotificationCenterItem[];
  defaultItems?: NotificationCenterItem[];
  onItemsChange?: (items: NotificationCenterItem[]) => void;
  label?: string;
}

function useControllableNotifications(
  controlledItems: NotificationCenterItem[] | undefined,
  defaultItems: NotificationCenterItem[],
  onItemsChange: ((items: NotificationCenterItem[]) => void) | undefined
) {
  const [uncontrolledItems, setUncontrolledItems] = React.useState(defaultItems);
  const items = controlledItems ?? uncontrolledItems;
  const itemsRef = React.useRef(items);

  React.useEffect(() => {
    itemsRef.current = items;
  }, [items]);

  const setItems = React.useCallback(
    (updater: (prev: NotificationCenterItem[]) => NotificationCenterItem[]) => {
      const nextItems = updater(itemsRef.current);
      if (controlledItems === undefined) {
        setUncontrolledItems(nextItems);
      }
      onItemsChange?.(nextItems);
    },
    [controlledItems, onItemsChange]
  );

  return { items, setItems };
}

export function NotificationCenter({
  items: controlledItems,
  defaultItems = [],
  onItemsChange,
  label = "Notifications",
  className,
  ...props
}: NotificationCenterProps) {
  const { items, setItems } = useControllableNotifications(
    controlledItems,
    defaultItems,
    onItemsChange
  );
  const [open, setOpen] = React.useState(false);
  const containerRef = React.useRef<HTMLDivElement>(null);
  const panelId = React.useId();

  const unreadCount = items.filter((item) => !item.read).length;

  const markAsRead = React.useCallback(
    (id: string) => {
      setItems((prev) =>
        prev.map((item) =>
          item.id === id ? { ...item, read: true } : item
        )
      );
    },
    [setItems]
  );

  const markAllRead = React.useCallback(() => {
    setItems((prev) => prev.map((item) => ({ ...item, read: true })));
  }, [setItems]);

  const clearAll = React.useCallback(() => {
    setItems(() => []);
  }, [setItems]);

  React.useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (!containerRef.current) {
        return;
      }
      if (!containerRef.current.contains(event.target as Node)) {
        setOpen(false);
      }
    }

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);

  return (
    <div
      ref={containerRef}
      className={cn("relative inline-flex", className)}
      {...props}
    >
      <button
        type="button"
        onClick={() => setOpen((prev) => !prev)}
        aria-expanded={open}
        aria-controls={panelId}
        className="relative inline-flex items-center gap-2 rounded-full border border-border bg-card px-4 py-2 text-sm font-medium text-foreground transition hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
      >
        <span>{label}</span>
        <NotificationBell />
        {unreadCount > 0 ? (
          <span className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs font-semibold text-foreground">
            {unreadCount}
          </span>
        ) : null}
      </button>
      {open ? (
        <div
          id={panelId}
          role="dialog"
          aria-label={`${label} panel`}
          className="absolute right-0 mt-3 w-80 rounded-xl border border-border bg-card p-4 shadow-sm"
        >
          <div className="flex items-center justify-between gap-2">
            <div>
              <p className="text-sm font-semibold text-foreground">
                {label}
              </p>
              <p className="text-xs text-muted-foreground">
                {unreadCount} unread
              </p>
            </div>
            <div className="flex items-center gap-2">
              <button
                type="button"
                onClick={markAllRead}
                className="rounded-full border border-border bg-background px-3 py-1 text-xs font-medium text-primary transition hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
              >
                Mark all read
              </button>
              <button
                type="button"
                onClick={clearAll}
                className="rounded-full border border-border bg-background px-3 py-1 text-xs font-medium text-destructive transition hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
              >
                Clear all
              </button>
            </div>
          </div>
          <div className="mt-4 space-y-3">
            {items.length === 0 ? (
              <div className="rounded-lg border border-border bg-muted p-3">
                <p className="text-sm text-muted-foreground">
                  No notifications right now.
                </p>
              </div>
            ) : (
              items.map((item) => (
                <div
                  key={item.id}
                  className="flex items-start gap-3 rounded-lg border border-border bg-background p-3"
                >
                  <span
                    className={cn(
                      "mt-1 h-2 w-2 rounded-full",
                      item.read ? "bg-muted" : "bg-primary"
                    )}
                  />
                  <div className="flex-1 space-y-1">
                    <div className="flex items-center justify-between gap-2">
                      <p className="text-sm font-medium text-foreground">
                        {item.title}
                      </p>
                      {item.time ? (
                        <span className="text-xs text-muted-foreground">
                          {item.time}
                        </span>
                      ) : null}
                    </div>
                    {item.description ? (
                      <p className="text-sm text-muted-foreground">
                        {item.description}
                      </p>
                    ) : null}
                    {!item.read ? (
                      <button
                        type="button"
                        onClick={() => markAsRead(item.id)}
                        className="text-xs font-medium text-primary transition hover:text-foreground"
                      >
                        Mark as read
                      </button>
                    ) : null}
                  </div>
                </div>
              ))
            )}
          </div>
        </div>
      ) : null}
    </div>
  );
}

function NotificationBell() {
  return (
    <svg
      viewBox="0 0 24 24"
      aria-hidden="true"
      className="h-4 w-4"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M15 17h5l-1.4-1.4A2 2 0 0 1 18 14.2V11a6 6 0 1 0-12 0v3.2a2 2 0 0 1-.6 1.4L4 17h5"
      />
      <path strokeLinecap="round" strokeLinejoin="round" d="M9 17a3 3 0 0 0 6 0" />
    </svg>
  );
}
Notification Center

Dependencies

Files

Installation
