diff --git a/src/components/RoomCard.jsx b/src/components/RoomCard.jsx index 1f783cc..a7ef825 100644 --- a/src/components/RoomCard.jsx +++ b/src/components/RoomCard.jsx @@ -1,6 +1,6 @@ -import { Users, Play, Trash2, Radio, Loader2, Share2 } from 'lucide-react'; +import { Users, Play, Trash2, Radio, Loader2, Share2, Copy, Link } from 'lucide-react'; import { useNavigate } from 'react-router-dom'; -import { useState, useEffect } from 'react'; +import { useState, useEffect, useRef } from 'react'; import api from '../services/api'; import { useLanguage } from '../contexts/LanguageContext'; import toast from 'react-hot-toast'; @@ -10,6 +10,24 @@ export default function RoomCard({ room, onDelete }) { const { t } = useLanguage(); const [status, setStatus] = useState({ running: false, participantCount: 0 }); const [starting, setStarting] = useState(false); + const [showCopyMenu, setShowCopyMenu] = useState(false); + const copyMenuRef = useRef(null); + + useEffect(() => { + const handleClickOutside = (e) => { + if (copyMenuRef.current && !copyMenuRef.current.contains(e.target)) { + setShowCopyMenu(false); + } + }; + document.addEventListener('mousedown', handleClickOutside); + return () => document.removeEventListener('mousedown', handleClickOutside); + }, []); + + const copyToClipboard = (url) => { + navigator.clipboard.writeText(url); + toast.success(t('room.linkCopied')); + setShowCopyMenu(false); + }; useEffect(() => { const checkStatus = async () => { @@ -99,6 +117,33 @@ export default function RoomCard({ room, onDelete }) { {starting ? : } {status.running ? t('room.join') : t('room.startMeeting')} +
+ + {showCopyMenu && ( +
+ + +
+ )} +
{onDelete && !room.shared && (