@stanfordspezi/spezi-web-design-system/dist/Notification-DzeW6gHn.js

Stanford Biodesign Digital Health Spezi Web Design System

"use strict";const i=require("react/jsx-runtime"),s=require("./index-DwV9MiDB.js"),d=require("react"),R=require("./index-k79m3Yno.js"),q=require("./SpeziProvider-BboZeZq0.js"),T=require("./InfoButton-R1NHg6LM.js"),z=require("./utils/date.cjs"),u=d.createContext(null),r=()=>{const t=d.useContext(u);if(!t)throw new Error("Missing NotificationContext provider.");return t},a=({notification:t,className:o,asChild:n,...e})=>{const c=n?R.Slot:"article";return i.jsx(u.Provider,{value:t,children:i.jsx(c,{className:s.cn("flex gap-x-4 border-b border-b-neutral-200 px-3 py-4 last:border-b-0",o),...e})})},N=({notification:t,children:o,href:n})=>{const{router:{Link:e}}=q.useSpeziContext();return i.jsx(a,{asChild:!0,notification:t,children:i.jsx(e,{href:n,className:"hover:bg-accent/50 cursor-pointer transition",children:o})})},m=({time:t,...o})=>{const n=r();return i.jsx("time",{className:s.cn("shrink-0 text-xs",!n.isRead&&"font-semibold"),...o,children:z.formatDateTime(t)})},j=({className:t,...o})=>{const n=r();return i.jsx("h5",{className:s.cn("flex-1 text-sm",n.isRead?"text-foreground/70 font-medium":"font-semibold",t),...o})},h=({className:t,...o})=>i.jsx("div",{className:s.cn("flex flex-1 flex-col gap-1",t),...o}),g=({className:t,...o})=>i.jsx("header",{className:s.cn("flex flex-1 gap-1",t),...o}),p=({className:t,...o})=>{const n=r();return i.jsx("p",{className:s.cn("flex-1 text-sm",n.isRead&&"text-foreground/70",t),...o})},b=({alt:t="Notification image",src:o,className:n,...e})=>{const c=r();return i.jsx("div",{className:s.cn("flex-center shrink-0",c.isRead&&"opacity-70"),children:o?i.jsx("img",{alt:t,className:s.cn("size-10 rounded-lg object-cover",n),src:o,...e}):i.jsx("div",{className:s.cn("flex-center bg-accent size-10 rounded-full",n),children:i.jsx(T.Info,{className:"text-foreground/25"})})})},C=({onClick:t,className:o,...n})=>i.jsx("div",{className:s.cn("flex gap-2 self-start",o),onClick:e=>{e.stopPropagation(),e.preventDefault(),t==null||t(e)},...n}),I=({title:t,image:o,message:n,time:e,actions:c,link:f,isRead:v})=>{const x=i.jsxs(i.Fragment,{children:[i.jsx(b,{src:o}),i.jsxs(h,{children:[(t||e)&&i.jsxs(g,{children:[t&&i.jsx(j,{children:t}),e&&i.jsx(m,{time:e})]}),n&&i.jsx(p,{children:n}),c&&i.jsx(C,{children:c})]})]}),l={isRead:v};return f?i.jsx(N,{href:f,notification:l,children:x}):i.jsx(a,{notification:l,children:x})};exports.Notification=I;exports.NotificationActions=C;exports.NotificationContentContainer=h;exports.NotificationHeader=g;exports.NotificationImage=b;exports.NotificationLink=N;exports.NotificationMessage=p;exports.NotificationRoot=a;exports.NotificationTime=m;exports.NotificationTitle=j;