"use client";

import * as React from "react";

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

type NotificationBellItem = {
  id: string;
  title: string;
  description?: string;
  time?: string;
  read?: boolean;
};

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

function useControllableItems(
  controlledItems: NotificationBellItem[] | undefined,
  defaultItems: NotificationBellItem[],
  onItemsChange: ((items: NotificationBellItem[]) => 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: NotificationBellItem[]) => NotificationBellItem[]) => {
      const nextItems = updater(itemsRef.current);
      if (controlledItems === undefined) {
        setUncontrolledItems(nextItems);
      }
      onItemsChange?.(nextItems);
    },
    [controlledItems, onItemsChange]
  );

  return { items, setItems };
}

export function NotificationBell({
  items: controlledItems,
  defaultItems = [],
  onItemsChange,
  label = "Notifications",
  emptyMessage = "No new notifications.",
  className,
  ...props
}: NotificationBellProps) {
  const { items, setItems } = useControllableItems(
    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]);

  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 h-10 w-10 items-center justify-center rounded-full border border-border bg-card text-foreground transition hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
      >
        <span className="sr-only">{label}</span>
        <BellIcon />
        {unreadCount > 0 ? (
          <span className="absolute -right-1 -top-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-[11px] font-semibold text-foreground">
            {unreadCount}
          </span>
        ) : null}
      </button>
      {open ? (
        <div
          id={panelId}
          role="dialog"
          aria-label={label}
          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>
            {items.length > 0 ? (
              <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>
            ) : null}
          </div>
          <div className="mt-4 space-y-2">
            {items.length === 0 ? (
              <div className="rounded-lg border border-border bg-muted p-3">
                <p className="text-sm text-muted-foreground">{emptyMessage}</p>
              </div>
            ) : (
              items.map((item) => (
                <button
                  key={item.id}
                  type="button"
                  onClick={() => markAsRead(item.id)}
                  className="w-full rounded-lg border border-border bg-background p-3 text-left transition hover:bg-muted"
                >
                  <div className="flex items-start gap-3">
                    <span
                      className={cn(
                        "mt-1 h-2.5 w-2.5 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}
                    </div>
                  </div>
                </button>
              ))
            )}
          </div>
        </div>
      ) : null}
    </div>
  );
}

function BellIcon() {
  return (
    <svg
      viewBox="0 0 24 24"
      aria-hidden="true"
      className="h-5 w-5"
      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>
  );
}

export type { NotificationBellItem };
Notification Bell

Dependencies

Files

Installation
