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

Stanford Biodesign Digital Health Spezi Web Design System

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