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

feat: renamed tool pages + qr code generator tool page implemented with output as Image & instant download

Browse source
This commit is contained in:
theoleuthardt 2025-02-20 23:20:38 +01:00
parent 3d3f56991b
commit 0833ce98b8
5 changed files with 123 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/password-generator/page.tsx
View file

@ -5,7 +5,7 @@ import Navbar from "../../components/Navbar";
import Footer from "../../components/Footer"; import Footer from "../../components/Footer";
import Button from "../../components/Button"; import Button from "../../components/Button";
export default function RgbToHex() { export default function PasswordGenerator() {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");

20
frontend/src/app/qr-code-generator/layout.tsx Normal file
View file

@ -0,0 +1,20 @@
import React from "react";
import type { Metadata } from "next";
import { toolLinks } from "@/constants";
export const metadata: Metadata = {
title: toolLinks[4].title,
description: "Generator for QR Codes!",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={`antialiased`}>{children}</body>
</html>
);
}

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

@ -0,0 +1,100 @@
"use client";
import React, { useState } from "react";
import Navbar from "../../components/Navbar";
import Footer from "../../components/Footer";
import Button from "../../components/Button";
import Image from "next/image";
export default function QrCodeGenerator() {
const [loading, setLoading] = useState(false);
const [qrcode, setQRCode] = useState<string | null>(null);
const downloadImage = (dataUrl: string) => {
const link = document.createElement("a");
link.href = dataUrl;
link.download = "qrcode.png";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
const generateQRCode = async () => {
setLoading(true);
const textInput = (document.getElementById("data") as HTMLInputElement)
.value;
try {
const response = await fetch(
process.env.backend_url + "/api/generate-qrcode",
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
data: textInput,
}),
},
);
if (!response.ok) {
console.error("Error while converting");
}
const data = await response.json();
console.log("Data:", data);
if (data.qrCode) {
setQRCode(data.qrCode);
downloadImage(data.qrCode);
}
} catch (error) {
console.error("Error while converting:", error);
alert("Error while converting");
} finally {
setLoading(false);
}
};
return (
<div className="w-screen h-auto min-h-screen bg-black text-white font-noto flex flex-col items-center">
<Navbar renderHomeLink={true} />
<div className="w-screen h-auto min-h-[calc(100vh-80px-60px)] flex flex-1 flex-col items-center justify-center">
<h2 className="text-5xl font-bold text-white mb-16">
qr-code-generator
</h2>
<div className="flex flex-row items-center justify-center gap-4 mb-6">
<input
className="h-20 w-64 p-2 rounded-xl text-white bg-black border-2 border-white text-center"
type="text"
id="data"
placeholder="Enter some data to convert!"
/>
</div>
<div className={"flex flex-row items-center gap-4 mt-1 mb-10"}>
<Button
content={
loading ? (
<div className="h-10 w-10 border-8 border-blue-100 border-t-blue-500 rounded-full animate-spin" />
) : (
"convert"
)
}
onClick={generateQRCode}
/>
</div>
<div className="p-3 rounded-xl text-center">
{qrcode && (
<Image
id="output"
src={qrcode}
alt="QR Code"
className="text-blue-400 text-3xl"
/>
)}
</div>
</div>
<Footer className="flex justify-center items-end" />
</div>
);
}

2
frontend/src/app/regex-tester/page.tsx
View file

@ -5,7 +5,7 @@ import Navbar from "../../components/Navbar";
import Footer from "../../components/Footer"; import Footer from "../../components/Footer";
import Button from "../../components/Button"; import Button from "../../components/Button";
export default function RgbToHex() { export default function RegexTester() {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [output, setOutput] = useState(""); const [output, setOutput] = useState("");

2
frontend/src/app/tmz-converter/page.tsx
View file

@ -4,7 +4,7 @@ import Navbar from "../../components/Navbar";
import Footer from "../../components/Footer"; import Footer from "../../components/Footer";
import Button from "../../components/Button"; import Button from "../../components/Button";
export default function DocConverter() { export default function TMZConverter() {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [convertedTMZ, setConvertedTMZ] = useState(""); const [convertedTMZ, setConvertedTMZ] = useState("");