ig.rizaldy.club/components/Overlay.js

67 lines
1.7 KiB
JavaScript
Raw Normal View History

2024-01-31 00:49:51 +07:00
import { MEDIA_TYPE } from "../constants";
const OverlayContent = ({ overlayContent }) => {
if (overlayContent?.type === MEDIA_TYPE.PHOTOS) {
return (
<img
alt={overlayContent?.url}
src={overlayContent?.url}
className="z-20 cursor-default"
/>
);
} else if (overlayContent?.type === MEDIA_TYPE.VIDEOS) {
return (
<iframe
2024-01-31 02:44:12 +07:00
className="md:w-6/12 w-full h-1/2"
2024-01-31 00:49:51 +07:00
allow="fullscreen"
sandbox="allow-same-origin allow-scripts allow-popups"
src={overlayContent?.url}
></iframe>
);
}
};
const Overlay = ({ overlayContent, closeOverlay }) => {
const isOverlayOpen = overlayContent?.type !== undefined;
return (
<div
onClick={closeOverlay}
className={`${
isOverlayOpen
2024-02-02 18:44:54 +07:00
? "bg-neutral-800/95 fixed w-full h-full left-0 top-0 cursor-pointer z-30"
2024-01-31 00:49:51 +07:00
: ""
}`}
>
{isOverlayOpen ? (
<p
onClick={closeOverlay}
2024-02-09 03:14:37 +07:00
className="fixed right-0 bottom-0 md:mx-5 my-5 text-white rounded text-sm text-center w-full z-30 md:bottom-10 px-2 leading-relaxed"
2024-01-31 00:49:51 +07:00
>
Click anywhere or press "Escape" to close
2024-02-09 03:14:37 +07:00
<span className="px-2">|</span>
<a
className="underline"
target="_blank"
rel="noreferer noopener"
href={overlayContent?.url}
>
Click here
</a>{" "}
to see the raw media
2024-01-31 00:49:51 +07:00
</p>
) : null}
<div
className={`flex justify-center items-center ${
2024-01-31 02:44:12 +07:00
isOverlayOpen ? "h-full w-full" : "h-0 w-0"
2024-01-31 00:49:51 +07:00
}`}
>
<OverlayContent overlayContent={overlayContent} />
</div>
</div>
);
};
export default Overlay;