import React from 'react' import { styled } from '~styles' export default function IFrameWarning({ url = 'https://tldraw.com' }: { url?: string }) { const [copied, setCopied] = React.useState(false) const rTimeout = React.useRef(0) const handleCopy = React.useCallback(() => { setCopied(true) clearTimeout(rTimeout.current) rTimeout.current = setTimeout(() => { setCopied(false) }, 1200) const textarea = document.createElement('textarea') textarea.setAttribute('position', 'fixed') textarea.setAttribute('top', '0') textarea.setAttribute('readonly', 'true') textarea.setAttribute('contenteditable', 'true') textarea.style.position = 'fixed' textarea.value = url document.body.appendChild(textarea) textarea.focus() textarea.select() try { const range = document.createRange() range.selectNodeContents(textarea) const sel = window.getSelection() if (sel) { sel.removeAllRanges() sel.addRange(range) textarea.setSelectionRange(0, textarea.value.length) } document.execCommand('copy') } catch (err) { null // Could not copy to clipboard } finally { document.body.removeChild(textarea) } }, [url]) return ( Visit this page on tldraw.com{' '} {url} {copied ? ( ) : ( )} ) } const StyledContainer = styled('div', { position: 'absolute', width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: '$body', fontWeight: 'normal', fontSize: '$3', gap: '$5', flexDirection: 'column', border: '1px solid $hover', borderRadius: '$2', }) const StyledUrlLink = styled('a', { display: 'flex', alignItems: 'center', gap: '$2', padding: '$5', }) const StyledUrlContainer = styled('a', { backgroundColor: '$hover', borderRadius: '$2', maxWidth: '62%', minWidth: 320, gap: '$4', padding: '$4 $5', fontSize: '$2', display: 'flex', alignItems: 'center', cursor: 'pointer', '& span': { flexGrow: 2, overflow: 'auto', whiteSpace: 'nowrap', '-ms-overflow-style': 'none' /* for Internet Explorer, Edge */, scrollbarWidth: 'none', '&::webkit-scrollbar': { display: 'none', }, }, })