Notification Card – Code

import { NotificationCard } from "@servicetitan/anvil2-ext-atlas";

function Notification() {
  return (
    <NotificationCard
      title="New message from Atlas"
      message="Your appointment has been confirmed for tomorrow."
      timestamp="2 min ago"
      unread
      onClick={() => openConversation()}
    />
  );
}

import { NotificationCard } from "@servicetitan/anvil2-ext-atlas";

function ReadNotification() {
  return (
    <NotificationCard
      title="Previous message"
      message="Thanks for your feedback!"
      timestamp="1 hour ago"
      onClick={() => openConversation()}
    />
  );
}

import { NotificationCard } from "@servicetitan/anvil2-ext-atlas";

function NotificationList({ notifications }) {
  return (
    <div>
      {notifications.map((notification) => (
        <NotificationCard
          key={notification.id}
          title={notification.title}
          message={notification.message}
          timestamp={notification.timestamp}
          unread={notification.unread}
          onClick={() => handleClick(notification.id)}
        />
      ))}
    </div>
  );
}