Initial

ShareModal.js

@@ -0,0 +1,48 @@
+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)}
+                        >
+                            &times;
+                        </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>
+            )}
+        </>
+    );
+}