NotificationCard

npx @glasskit-ui/cli add notification-card

npm install @glasskit-ui/react

// components/lib/utils.tsexport type ClassValue = string | number | null | undefined | false;/** * Join truthy class names. Dependency-free on purpose: the lens components * style via bespoke semantic classes (no conflicting Tailwind utilities to * de-dupe), so this needs no clsx/tailwind-merge and resolves from anywhere * the registry is vendored. */export function cn(...inputs: ClassValue[]): string {  return inputs.filter(Boolean).join(" ");}/** * Accessible name from a free-form `label` prop: the label itself when it's a * plain string, otherwise undefined (a ReactNode can't become an aria-label). */export function stringLabel(label: unknown): string | undefined {  return typeof label === "string" ? label : undefined;}

// components/glasskit/notification-card.tsximport type { ReactNode } from "react";import { cn } from "../lib/utils";/** * <NotificationCard> — an incoming notification (message, mention, alert): a * leading avatar/glyph, sender + time, a message preview, and optional quick * actions. A popping surface, below the sightline like the real Display. Richer * than <Toast> (which is a transient one-liner). RTL-safe (logical layout). */export function NotificationCard({  avatar,  title,  time,  children,  actions,  className,}: {  /** Leading <Avatar> or app <GlowIcon>. */  avatar?: ReactNode;  /** Sender / app name. */  title: ReactNode;  /** Optional timestamp. */  time?: ReactNode;  /** The message preview. */  children: ReactNode;  /** Optional action row (e.g. <QuickReplyChips> or <Button>s). */  actions?: ReactNode;  className?: string;}) {  return (    <div className={cn("gk-notif gk-surface", className)} role="status">      <div className="gk-notif__head">        {avatar != null ? (          <span className="gk-notif__avatar">{avatar}</span>        ) : null}        <span className="gk-notif__title t-body">{title}</span>        {time != null ? (          <span className="gk-notif__time t-caption">{time}</span>        ) : null}      </div>      <div className="gk-notif__body t-body">{children}</div>      {actions != null ? (        <div className="gk-notif__actions">{actions}</div>      ) : null}    </div>  );}