@stanfordspezi/spezi-web-design-system/dist/Notification-BCen3dT0.mjs

Stanford Biodesign Digital Health Spezi Web Design System

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