Daniel Volz
9a2d42b8b9
* feat: make medication names clickable in Dashboard dose schedule Add click handlers to med-name-stack divs in all three dose schedule sections (past, current/overdue, future) on DashboardPage, opening the MedDetail modal on click. Add early-return guards to all four modal openers in AppContext (openMedDetail, openImageLightbox, openScheduleLightbox, openUserFilter) to prevent duplicate pushState entries on double-click, which caused unexpected navigation to the Medications page. Closes #266 * fix: stabilize dashboard modal and image click handling * fix: close medication detail on first backdrop click
47 lines
1.0 KiB
TypeScript
47 lines
1.0 KiB
TypeScript
// =============================================================================
|
||
// Lightbox Component - Full-screen image viewer
|
||
// =============================================================================
|
||
|
||
import type { MouseEvent } from "react";
|
||
|
||
export interface LightboxProps {
|
||
src: string;
|
||
alt: string;
|
||
onClose: () => void;
|
||
}
|
||
|
||
export function Lightbox({ src, alt, onClose }: LightboxProps) {
|
||
function handleOverlayClick(e: MouseEvent) {
|
||
e.stopPropagation();
|
||
if (e.target === e.currentTarget) {
|
||
onClose();
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div
|
||
className="lightbox-overlay"
|
||
onClick={handleOverlayClick}
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Escape") {
|
||
e.stopPropagation();
|
||
onClose();
|
||
}
|
||
}}
|
||
>
|
||
<div className="lightbox-container">
|
||
<button className="lightbox-close" onClick={onClose}>
|
||
×
|
||
</button>
|
||
<img
|
||
src={src}
|
||
alt={alt}
|
||
className="lightbox-image"
|
||
onClick={(e) => e.stopPropagation()}
|
||
onKeyDown={(e) => e.stopPropagation()}
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|