Notification stack

"use client";
import styles from "./NotificationStack.module.css";
import { useState, useRef } from "react";
export default function NotificationStack({
  title = "Your workspace is up to date.",
}) {
  const next = useRef(2);
  const [items, setItems] = useState([{ id: 1, title }]);
  return (
    <div className={styles.root}>
      <div className={styles.stack} aria-label="Recent notifications">
        {items.map((item, index) => (
          <div
            className={styles.note}
            key={item.id}
            style={{ "--index": index }}
          >
            <span className={styles.dot} aria-hidden="true">
              ✓
            </span>
            <div>
              <strong>All set</strong>
              <p>{item.title}</p>
            </div>
            <button
              type="button"
              aria-label={`Dismiss notification ${item.id}`}
              onClick={() =>
                setItems((previous) =>
                  previous.filter((entry) => entry.id !== item.id),
                )
              }
            >
              ×
            </button>
          </div>
        ))}
      </div>
      <div className={styles.controls}>
        <button
          type="button"
          onClick={() => {
            const notification = { id: next.current++, title };
            setItems((previous) => [notification, ...previous].slice(0, 3));
          }}
        >
          Add notification <span aria-hidden="true">+</span>
        </button>
        <span role="status">{items.length} of 3</span>
      </div>
    </div>
  );
}