41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import React from "react";
|
|
import { useLightboxContext } from "./LightboxContext";
|
|
|
|
import "./Lightbox.css";
|
|
import { LightboxData } from "@mt/common-types";
|
|
import { LightboxContent } from "./LightboxContent";
|
|
import { FormattedMessage } from "react-intl";
|
|
|
|
export const Lightbox = () => {
|
|
// prettier-ignore
|
|
const { data, lightboxActive, closeLightbox } = useLightboxContext<LightboxData>();
|
|
|
|
return lightboxActive ? (
|
|
<div className="lightbox-overlay">
|
|
<div className="lightbox-content">
|
|
<div
|
|
className="lightbox-content__wrapper"
|
|
style={{ height: "749px", width: "1220px" }}
|
|
>
|
|
<LightboxContent />
|
|
|
|
{data.watermarkUrl && (
|
|
<img
|
|
src={data.watermarkUrl}
|
|
alt="Watermark"
|
|
className="watermark"
|
|
/>
|
|
)}
|
|
|
|
<button
|
|
className="lightbox-content__close-btn"
|
|
onPointerUp={closeLightbox}
|
|
>
|
|
<FormattedMessage id="close" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null;
|
|
};
|