diff --git a/frontend/src/app/password-generator/page.tsx b/frontend/src/app/password-generator/page.tsx index eda0f9e..138fba1 100644 --- a/frontend/src/app/password-generator/page.tsx +++ b/frontend/src/app/password-generator/page.tsx @@ -5,7 +5,7 @@ import Navbar from "../../components/Navbar"; import Footer from "../../components/Footer"; import Button from "../../components/Button"; -export default function RgbToHex() { +export default function PasswordGenerator() { const [loading, setLoading] = useState(false); const [password, setPassword] = useState(""); diff --git a/frontend/src/app/qr-code-generator/layout.tsx b/frontend/src/app/qr-code-generator/layout.tsx new file mode 100644 index 0000000..6d53bdd --- /dev/null +++ b/frontend/src/app/qr-code-generator/layout.tsx @@ -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 ( + + {children} + + ); +} diff --git a/frontend/src/app/qr-code-generator/page.tsx b/frontend/src/app/qr-code-generator/page.tsx new file mode 100644 index 0000000..0b2a82b --- /dev/null +++ b/frontend/src/app/qr-code-generator/page.tsx @@ -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(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 ( +
+ +
+

+ qr-code-generator +

+
+ +
+
+
+
+ {qrcode && ( + QR Code + )} +
+
+
+ ); +} diff --git a/frontend/src/app/regex-tester/page.tsx b/frontend/src/app/regex-tester/page.tsx index a29cf2a..91d33fa 100644 --- a/frontend/src/app/regex-tester/page.tsx +++ b/frontend/src/app/regex-tester/page.tsx @@ -5,7 +5,7 @@ import Navbar from "../../components/Navbar"; import Footer from "../../components/Footer"; import Button from "../../components/Button"; -export default function RgbToHex() { +export default function RegexTester() { const [loading, setLoading] = useState(false); const [output, setOutput] = useState(""); diff --git a/frontend/src/app/tmz-converter/page.tsx b/frontend/src/app/tmz-converter/page.tsx index b138d7c..2b0fd00 100644 --- a/frontend/src/app/tmz-converter/page.tsx +++ b/frontend/src/app/tmz-converter/page.tsx @@ -4,7 +4,7 @@ import Navbar from "../../components/Navbar"; import Footer from "../../components/Footer"; import Button from "../../components/Button"; -export default function DocConverter() { +export default function TMZConverter() { const [loading, setLoading] = useState(false); const [convertedTMZ, setConvertedTMZ] = useState("");