雨霖铃
37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
import TextInputArea from '@/components/TextInputArea';
|
|
import QrCodePreview from '@/components/QrCodePreview';
|
|
import { useSnackbar } from '@/components/GlobalSnackbar';
|
|
import { useLazyTranslation } from '@/utils/useLazyTranslation';
|
|
import { useQrCodeContext } from '../contexts/QrCodeContext';
|
|
|
|
export default function GeneratePanel() {
|
|
const { t } = useLazyTranslation('qrCode');
|
|
const { showMessage } = useSnackbar();
|
|
const { generatorState, setTextToEncode, downloadQrCode, copyQrCode } = useQrCodeContext();
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<TextInputArea
|
|
title={t('qrCode:urlInputLabel')}
|
|
value={generatorState.textToEncode}
|
|
onChange={setTextToEncode}
|
|
placeholder={t('qrCode:urlInputPlaceholder')}
|
|
showCount
|
|
showClear
|
|
allowCopy
|
|
externalError={generatorState.inputError}
|
|
showMessage={showMessage}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<QrCodePreview
|
|
qrCodeDataUrl={generatorState.qrCodeDataUrl}
|
|
onDownload={downloadQrCode}
|
|
onCopy={copyQrCode}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|