67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import { useState } from 'react'
|
||
import { useLanguage } from '../contexts/LanguageContext'
|
||
import Toast from './Toast'
|
||
import './ShareModal.css'
|
||
|
||
interface ShareModalProps {
|
||
isOpen: boolean
|
||
onClose: () => void
|
||
shareUrl: string
|
||
}
|
||
|
||
export default function ShareModal({ isOpen, onClose, shareUrl }: ShareModalProps) {
|
||
const { t } = useLanguage()
|
||
const [showToast, setShowToast] = useState(false)
|
||
|
||
if (!isOpen) return null
|
||
|
||
const handleCopy = () => {
|
||
navigator.clipboard.writeText(shareUrl)
|
||
setShowToast(true)
|
||
}
|
||
|
||
return (
|
||
<div className="modal-overlay" onClick={onClose}>
|
||
<div className="modal-content" onClick={e => e.stopPropagation()}>
|
||
<button className="modal-close" onClick={onClose}>×</button>
|
||
|
||
<div className="modal-header">
|
||
<div className="modal-icon">🎉</div>
|
||
<h2 className="modal-title">{t('测试完成', 'Test Completed')}</h2>
|
||
<p className="modal-subtitle">
|
||
{t('您的网络延迟测试已完成，分享此链接给他人查看结果。', 'Your network latency test is complete. Share this link to show results.')}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="modal-body">
|
||
<div className="share-box">
|
||
<input
|
||
type="text"
|
||
value={shareUrl}
|
||
readOnly
|
||
className="share-input"
|
||
onClick={handleCopy}
|
||
/>
|
||
<button className="copy-btn" onClick={handleCopy}>
|
||
{t('复制', 'Copy')}
|
||
</button>
|
||
</div>
|
||
|
||
<div className="warning-box">
|
||
<span className="warning-icon">⚠️</span>
|
||
<p className="warning-text">
|
||
{t('结果链接随时可能失效，请根据需要保存测试结果。', 'Result link may expire at any time. Please save your test results as needed.')}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<Toast
|
||
message={t('已复制到剪贴板!', 'Copied to clipboard!')}
|
||
isVisible={showToast}
|
||
onClose={() => setShowToast(false)}
|
||
/>
|
||
</div>
|
||
)
|
||
}
|