@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
199 lines (198 loc) • 4.24 kB
JavaScript
import { jsx as o, jsxs as r, Fragment as u } from "react/jsx-runtime";
import { c as a } from "./index-2NvaPZWc.mjs";
import { createContext as h, useContext as p } from "react";
import { S as g } from "./index-D2LZVjSn.mjs";
import { useSpeziContext as b } from "./SpeziProvider.js";
import C from "./info-Rwd6b8T2.mjs";
import { formatDateTime as v } from "./utils/date.js";
const m = h(null), s = () => {
const t = p(m);
if (!t)
throw new Error("Missing NotificationContext provider.");
return t;
}, x = ({
notification: t,
className: i,
asChild: n,
...e
}) => {
const c = n ? g : "article";
return /* @__PURE__ */ o(m.Provider, { value: t, children: /* @__PURE__ */ o(
c,
{
"data-slot": "notification-root",
className: a(
"flex gap-x-4 border-b border-b-neutral-200 px-3 py-4 last:border-b-0",
i
),
...e
}
) });
}, k = ({
notification: t,
children: i,
href: n
}) => {
const {
router: { Link: e }
} = b();
return /* @__PURE__ */ o(x, { asChild: !0, notification: t, children: /* @__PURE__ */ o(
e,
{
href: n,
"data-slot": "notification-link",
className: "hover:bg-accent/50 cursor-pointer transition",
children: i
}
) });
}, R = ({ time: t, ...i }) => {
const n = s();
return /* @__PURE__ */ o(
"time",
{
"data-slot": "notification-time",
className: a(
"shrink-0 text-xs",
!n.isRead && "font-semibold"
),
...i,
children: v(t)
}
);
}, j = ({
className: t,
...i
}) => {
const n = s();
return /* @__PURE__ */ o(
"h5",
{
"data-slot": "notification-title",
className: a(
"flex-1 text-sm",
n.isRead ? "text-foreground/70 font-medium" : "font-semibold",
t
),
...i
}
);
}, z = ({
className: t,
...i
}) => /* @__PURE__ */ o(
"div",
{
"data-slot": "notification-content-container",
className: a("flex flex-1 flex-col gap-1", t),
...i
}
), S = ({
className: t,
...i
}) => /* @__PURE__ */ o(
"header",
{
"data-slot": "notification-header",
className: a("flex flex-1 gap-1", t),
...i
}
), T = ({
className: t,
...i
}) => {
const n = s();
return /* @__PURE__ */ o(
"p",
{
"data-slot": "notification-message",
className: a(
"flex-1 text-sm",
n.isRead && "text-foreground/70",
t
),
...i
}
);
}, w = ({
alt: t = "Notification image",
src: i,
className: n,
...e
}) => {
const c = s();
return /* @__PURE__ */ o(
"div",
{
"data-slot": "notification-image",
className: a(
"flex-center shrink-0",
c.isRead && "opacity-70"
),
children: i ? /* @__PURE__ */ o(
"img",
{
alt: t,
className: a("size-10 rounded-lg object-cover", n),
src: i,
...e
}
) : /* @__PURE__ */ o(
"div",
{
className: a(
"flex-center bg-accent size-10 rounded-full",
n
),
children: /* @__PURE__ */ o(C, { className: "text-foreground/25" })
}
)
}
);
}, y = ({
onClick: t,
className: i,
...n
}) => /* @__PURE__ */ o(
"div",
{
"data-slot": "notification-actions",
className: a("flex gap-2 self-start", i),
onClick: (e) => {
e.stopPropagation(), e.preventDefault(), t?.(e);
},
...n
}
), F = ({
title: t,
image: i,
message: n,
time: e,
actions: c,
link: f,
isRead: N
}) => {
const l = /* @__PURE__ */ r(u, { children: [
/* @__PURE__ */ o(w, { src: i }),
/* @__PURE__ */ r(z, { children: [
(t || e) && /* @__PURE__ */ r(S, { children: [
t && /* @__PURE__ */ o(j, { children: t }),
e && /* @__PURE__ */ o(R, { time: e })
] }),
n && /* @__PURE__ */ o(T, { children: n }),
c && /* @__PURE__ */ o(y, { children: c })
] })
] }), d = { isRead: N };
return f ? /* @__PURE__ */ o(k, { href: f, notification: d, children: l }) : /* @__PURE__ */ o(x, { notification: d, children: l });
};
export {
F as N,
y as a,
z as b,
S as c,
w as d,
k as e,
T as f,
x as g,
R as h,
j as i
};