From 2ccbef3ec119a63db47b7e3e35733b44fc367927 Mon Sep 17 00:00:00 2001
From: No0ne003 <hi.yassir.op@gmail.com>
Date: Thu, 28 Mar 2024 16:23:22 +0000
Subject: [PATCH] finish QR code Generator

---
 src/pages/QRCodeGenerator.jsx | 48 ++++++++++++++++++++++++++++++++---
 1 file changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/pages/QRCodeGenerator.jsx b/src/pages/QRCodeGenerator.jsx
index 5eab106..802ebd0 100644
--- a/src/pages/QRCodeGenerator.jsx
+++ b/src/pages/QRCodeGenerator.jsx
@@ -1,8 +1,48 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import QRCode from "react-qr-code";
+import { useState } from "react";
 
 const QRCodeGenerator = () => {
+  const [qrCode, setQrCode] = useState("");
+  const [input, setInput] = useState("");
+
+  function handleGenerateQrCode() {
+    setQrCode(input);
+    setInput("");
+  }
+
   return (
-    <div>QRCodeGenerator</div>
-  )
-}
+    <div
+      className={`container flex flex-col flex-1 items-center justify-center gap-8 my-10 w-full max-h-screen relative overflow-x-hidden`}
+    >
+      <h1>QR Code Generator</h1>
+      <div className="flex gap-3">
+        <Input
+          onChange={(e) => setInput(e.target.value)}
+          type="text"
+          name="qr-code"
+          value={input}
+          placeholder="Enter your value here"
+        />
+        <Button
+          disabled={input && input.trim() !== "" ? false : true}
+          onClick={handleGenerateQrCode}
+          variant="secondary"
+        >
+          Generate
+        </Button>
+      </div>
+      <div>
+        <QRCode
+          id="qr-code-value"
+          value={qrCode}
+          size={400}
+          bgColor="transparent"
+        />
+      </div>
+    </div>
+  );
+};
 
-export default QRCodeGenerator
+export default QRCodeGenerator;