2024-01-06 11:46:45 +03:00
|
|
|
import './embed-modal.css';
|
|
|
|
|
|
|
|
import Icon from './icon';
|
|
|
|
|
2024-01-19 15:31:05 +03:00
|
|
|
function EmbedModal({ html, url, width, height, onClose = () => {} }) {
|
2024-01-06 11:46:45 +03:00
|
|
|
return (
|
|
|
|
<div class="embed-modal-container">
|
|
|
|
<div class="top-controls">
|
|
|
|
<button type="button" class="light" onClick={() => onClose()}>
|
|
|
|
<Icon icon="x" />
|
|
|
|
</button>
|
|
|
|
{url && (
|
|
|
|
<a
|
|
|
|
href={url}
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
class="button plain"
|
|
|
|
>
|
|
|
|
<span>Open link</span> <Icon icon="external" />
|
|
|
|
</a>
|
|
|
|
)}
|
|
|
|
</div>
|
2024-01-19 15:31:05 +03:00
|
|
|
<div
|
|
|
|
class="embed-content"
|
|
|
|
dangerouslySetInnerHTML={{ __html: html }}
|
|
|
|
style={{
|
|
|
|
'--width': width + 'px',
|
|
|
|
'--height': height + 'px',
|
|
|
|
'--aspect-ratio': `${width}/${height}`,
|
|
|
|
}}
|
|
|
|
/>
|
2024-01-06 11:46:45 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default EmbedModal;
|