@stanfordspezi/spezi-web-design-system/dist/NotificationActions-ybDOzZfr.mjs

Stanford Biodesign Digital Health Spezi Web Design System

import { jsx as i } from "react/jsx-runtime";
import { c as n } from "./index-2NvaPZWc.mjs";
import { S as f } from "./index-Bytw4Lqn.mjs";
import { u as l } from "./SpeziProvider-DjiaU6qz.mjs";
import { formatDateTime as m } from "./utils/date.js";
import { createContext as d, useContext as x } from "react";
import { I as u } from "./FormError-DjJ1kCLa.mjs";
const c = d(null), s = () => {
  const t = x(c);
  if (!t)
    throw new Error("Missing NotificationContext provider.");
  return t;
}, N = ({
  notification: t,
  children: o,
  className: e,
  asChild: a
}) => {
  const r = a ? f : "article";
  return /* @__PURE__ */ i(c.Provider, { value: t, children: /* @__PURE__ */ i(
    r,
    {
      className: n(
        "flex gap-x-4 border-b border-b-neutral-200 px-3 py-4 last:border-b-0",
        e
      ),
      children: o
    }
  ) });
}, z = ({
  notification: t,
  children: o,
  href: e
}) => {
  const {
    router: { Link: a }
  } = l();
  return /* @__PURE__ */ i(N, { asChild: !0, notification: t, children: /* @__PURE__ */ i(
    a,
    {
      href: e,
      className: "hover:bg-accent/50 cursor-pointer transition",
      children: o
    }
  ) });
}, I = ({ time: t, ...o }) => {
  const e = s();
  return /* @__PURE__ */ i(
    "time",
    {
      className: n(
        "shrink-0 text-xs",
        !e.isRead && "font-semibold"
      ),
      ...o,
      children: m(t)
    }
  );
}, S = ({
  className: t,
  ...o
}) => {
  const e = s();
  return /* @__PURE__ */ i(
    "h5",
    {
      className: n(
        "flex-1 text-sm",
        e.isRead ? "text-foreground/70 font-medium" : "font-semibold",
        t
      ),
      ...o
    }
  );
}, T = ({
  className: t,
  ...o
}) => /* @__PURE__ */ i("div", { className: n("flex flex-1 flex-col gap-1", t), ...o }), j = ({
  className: t,
  ...o
}) => /* @__PURE__ */ i("header", { className: n("flex flex-1 gap-1", t), ...o }), w = ({
  className: t,
  ...o
}) => {
  const e = s();
  return /* @__PURE__ */ i(
    "p",
    {
      className: n(
        "flex-1 text-sm",
        e.isRead && "text-foreground/70",
        t
      ),
      ...o
    }
  );
}, y = ({
  alt: t = "Notification image",
  src: o,
  className: e,
  ...a
}) => {
  const r = s();
  return /* @__PURE__ */ i(
    "div",
    {
      className: n(
        "flex-center shrink-0",
        r.isRead && "opacity-70"
      ),
      children: o ? /* @__PURE__ */ i(
        "img",
        {
          alt: t,
          className: n("size-10 rounded-lg object-cover", e),
          src: o,
          ...a
        }
      ) : /* @__PURE__ */ i(
        "div",
        {
          className: n(
            "flex-center bg-accent size-10 rounded-full",
            e
          ),
          children: /* @__PURE__ */ i(u, { className: "text-foreground/25" })
        }
      )
    }
  );
}, D = ({
  onClick: t,
  className: o,
  ...e
}) => /* @__PURE__ */ i(
  "div",
  {
    className: n("flex gap-2 self-start", o),
    onClick: (a) => {
      a.stopPropagation(), a.preventDefault(), t == null || t(a);
    },
    ...e
  }
);
export {
  z as N,
  I as a,
  S as b,
  N as c,
  T as d,
  j as e,
  w as f,
  y as g,
  D as h
};