雨霖铃
52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
import { Download, Copy } from 'lucide-react';
|
|
import { useLazyTranslation } from '@/utils/useLazyTranslation';
|
|
|
|
interface QrCodePreviewProps {
|
|
/** 二维码 Data URL */
|
|
qrCodeDataUrl: string;
|
|
/** 下载回调 */
|
|
onDownload: () => void;
|
|
/** 复制回调 */
|
|
onCopy: () => void;
|
|
}
|
|
|
|
const QrCodePreview = ({ qrCodeDataUrl, onDownload, onCopy }: QrCodePreviewProps) => {
|
|
const { t } = useLazyTranslation('qrCode');
|
|
|
|
if (!qrCodeDataUrl) {
|
|
return (
|
|
<div className="flex flex-col justify-center items-center min-h-[200px] border-2 border-dashed border-gray-300 rounded-xl p-4 bg-gray-50">
|
|
<span className="text-sm text-gray-500 text-center">{t('qrCode:qrCodeWillShow')}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col justify-center items-center min-h-[200px] border-2 border-dashed border-gray-300 rounded-xl p-4 bg-gray-50">
|
|
<div className="flex flex-col items-center w-full">
|
|
<img src={qrCodeDataUrl} alt="QR Code" className="w-[250px] h-[250px] block" />
|
|
<div className="flex gap-2 mt-4">
|
|
<button
|
|
type="button"
|
|
onClick={onDownload}
|
|
className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-green-700 bg-white border border-green-600 rounded-lg hover:bg-green-50 transition-colors"
|
|
>
|
|
<Download className="w-4 h-4" />
|
|
{t('qrCode:downloadButton')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onCopy}
|
|
className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors"
|
|
>
|
|
<Copy className="w-4 h-4" />
|
|
{t('qrCode:copyQrButton')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default QrCodePreview;
|