theo/werkzeugkiste
1
0
Fork 0
mirror of https://github.com/theoleuthardt/werkzeugkiste.git synced 2026-06-13 09:37:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: QRCode variable name + clear button and conditional rendering

Browse source
This commit is contained in:
theoleuthardt 2025-02-21 15:19:44 +01:00
parent 92102ff282
commit 69370f1049
1 changed files with 14 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

21
frontend/src/app/qr-code-generator/page.tsx
View file

@ -7,7 +7,7 @@ import Image from "next/image";
export default function QrCodeGenerator() { export default function QrCodeGenerator() {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [qrcode, setQRCode] = useState<string | null>(null); const [QRCodeURL, setQRCodeURL] = useState<string | null>(null);
const downloadImage = (dataUrl: string) => { const downloadImage = (dataUrl: string) => {
const link = document.createElement("a"); const link = document.createElement("a");
@ -33,7 +33,7 @@ export default function QrCodeGenerator() {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
body: JSON.stringify({ body: JSON.stringify({
data: textInput, qrcodeContent: textInput,
}), }),
}, },
); );
@ -43,9 +43,8 @@ export default function QrCodeGenerator() {
} }
const data = await response.json(); const data = await response.json();
console.log("Data:", data);
if (data.qrCode) { if (data.qrCode) {
setQRCode(data.qrCode); setQRCodeURL(data.qrCode);
downloadImage(data.qrCode); downloadImage(data.qrCode);
} }
} catch (error) { } catch (error) {
@ -56,6 +55,12 @@ export default function QrCodeGenerator() {
} }
}; };
function clearInputAndQRCode() {
setQRCodeURL("");
const data = document.getElementById("data") as HTMLInputElement;
data.value = "";
}
return ( return (
<div className="w-screen h-auto min-h-screen bg-black text-white font-noto flex flex-col items-center"> <div className="w-screen h-auto min-h-screen bg-black text-white font-noto flex flex-col items-center">
<Navbar renderHomeLink={true} /> <Navbar renderHomeLink={true} />
@ -82,14 +87,16 @@ export default function QrCodeGenerator() {
} }
onClick={generateQRCode} onClick={generateQRCode}
/> />
<Button content="clear" onClick={clearInputAndQRCode} />
</div> </div>
<div className="p-3 rounded-xl text-center"> <div className="p-3 rounded-xl text-center">
{qrcode && ( {QRCodeURL && (
<Image <Image
id="output" id="output"
src={qrcode} src={QRCodeURL}
alt="QR Code" alt="QR Code"
className="text-blue-400 text-3xl" width={128}
height={128}
/> />
)} )}
</div> </div>