49 lines
2.1 KiB
JavaScript
49 lines
2.1 KiB
JavaScript
function ShareModal({ postUrl }) {
|
|
const [visible, setVisible] = useState(false);
|
|
|
|
if (!postUrl) return null;
|
|
|
|
return (
|
|
<>
|
|
<button onClick={() => setVisible(true)}>Share</button>
|
|
{visible && (
|
|
<div className="listing-share-modal" style={{
|
|
display: 'flex',
|
|
position: 'fixed',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
backgroundColor: 'rgba(0,0,0,0.5)'
|
|
}}>
|
|
<div style={{
|
|
background: '#fff',
|
|
padding: '20px',
|
|
maxWidth: '400px',
|
|
width: '90%',
|
|
borderRadius: '6px',
|
|
position: 'relative'
|
|
}}>
|
|
<button
|
|
aria-label="Close"
|
|
style={{ position: 'absolute', top: 10, right: 10, fontSize: 24, background: 'none', border: 'none', cursor: 'pointer' }}
|
|
onClick={() => setVisible(false)}
|
|
>
|
|
×
|
|
</button>
|
|
<h2>Share this listing</h2>
|
|
<input type="text" className="share-link" readOnly value={postUrl} style={{ width: '100%', marginBottom: 10 }} />
|
|
<div className="listing-share-links">
|
|
<a href={`https://twitter.com/share?url=${encodeURIComponent(postUrl)}`} target="_blank">Twitter</a>
|
|
<a href={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(postUrl)}`} target="_blank">Facebook</a>
|
|
<a href={`mailto:?body=${encodeURIComponent(postUrl)}`} target="_blank">Email</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|