78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
import React, { useState } from 'react';
|
|
import axios from 'axios';
|
|
import styles from '@styles/QRForm.module.scss';
|
|
|
|
const QRForm: React.FC = () => {
|
|
const [text, setText] = useState('');
|
|
const [size, setSize] = useState<'150' | '300' | '600'>('300');
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [imageUrl, setImageUrl] = useState<string | null>(null);
|
|
|
|
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
setError(null);
|
|
setImageUrl(null);
|
|
|
|
if (!text.trim()) {
|
|
setError('Please enter a URL or text to encode.');
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
try {
|
|
// Call a mock API to simulate server-side generation step.
|
|
// Using jsonplaceholder as a harmless mock endpoint.
|
|
await axios.post('https://jsonplaceholder.typicode.com/posts', {
|
|
payload: text,
|
|
size,
|
|
});
|
|
|
|
// Build a QR image URL using a public QR generator for preview purposes.
|
|
// In a real implementation the server would return the final image URL or binary data.
|
|
const generatedUrl = `https://api.qrserver.com/v1/create-qr-code/?size=${size}x${size}&data=${encodeURIComponent(
|
|
text
|
|
)}`;
|
|
setImageUrl(generatedUrl);
|
|
} catch (err) {
|
|
setError('Failed to generate QR code. Please try again.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={styles.qrFormBody}>
|
|
<form onSubmit={handleSubmit}>
|
|
<label className={styles.qrFormLabel}>Submit URL or text</label>
|
|
<input
|
|
type="text"
|
|
value={text}
|
|
onChange={(e) => setText(e.target.value)}
|
|
placeholder="https://example.com or some text"
|
|
className={styles.qrFormInput}
|
|
/>
|
|
|
|
<label className={styles.qrFormLabel}>Image size</label>
|
|
<select
|
|
value={size}
|
|
onChange={(e) => setSize(e.target.value as '150' | '300' | '600')}
|
|
className={styles.qrFormSelect}
|
|
>
|
|
<option value="150">Small — 150x150</option>
|
|
<option value="300">Medium — 300x300</option>
|
|
<option value="600">Large — 600x600</option>
|
|
</select>
|
|
|
|
{error && <div className={styles.qrError}>{error}</div>}
|
|
|
|
<button type="submit" disabled={loading} className={styles.qrFormButton}>
|
|
{loading ? 'Generating…' : 'Generate'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default QRForm;
|