formatting

Signed-off-by: varunvaatsalya <[email protected]>
VesperAkshay · Oct 4, 2024 · 6828d23 · 6828d23
1 parent 98a82a8
commit 6828d23
Show file tree

Hide file tree

Showing 3 changed files with 167 additions and 99 deletions.
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -51,7 +51,7 @@ export default function Navbar() {
                   toast.error("Logout failed. Please try again."); // Show an error message
                 }
               }}
-              className="text-red-600 hover:bg-red-200 px-4 py-2 bg-red-100 m-2 mt-4 rounded-md "
+              className="text-red-600 hover:bg-red-200 px-4 py-2 bg-red-100 m-2 mt-4 rounded-md"
             >
               Log out
             </button>
@@ -67,14 +67,14 @@ export default function Navbar() {
 
   const handleToggleTheme = () => {
     toggleTheme();
-      toast(`Theme changed to ${theme==="light" ? "Dark" : "Light"} mode!`, {
-        icon: `${theme==="light" ? "🌙" : "☀️"}`,
-        style: {
-          borderRadius: "10px",
-          background: `${theme==="light" ? "#333" : "#fff"} `,
-          color: `${theme==="light" ? "#fff" : "#333"}`,
-        },
-      });
+    toast(`Theme changed to ${theme === "light" ? "Dark" : "Light"} mode!`, {
+      icon: `${theme === "light" ? "🌙" : "☀️"}`,
+      style: {
+        borderRadius: "10px",
+        background: `${theme === "light" ? "#333" : "#fff"} `,
+        color: `${theme === "light" ? "#fff" : "#333"}`,
+      },
+    });
   };
 
   const [dropdownOpen, setDropdownOpen] = useState(false);

diff --git a/src/components/QRCodeGenerator.js b/src/components/QRCodeGenerator.js
@@ -1,49 +1,49 @@
-import React, { useState, useRef, useEffect } from 'react';
-import QRCodeStyling from 'qr-code-styling';
-import { motion } from 'framer-motion';
-import CategorySelector from './CategorySelector';
-import VCardForm from './VCardForm';
-import WifiForm from './WifiForm';
-import ColorPicker from './ColorPicker';
-import SizeSlider from './SizeSlider';
-import FileUploader from './FileUploader';
-import DownloadButton from './DownloadButton';
-import toast from 'react-hot-toast';
+import React, { useState, useRef, useEffect } from "react";
+import QRCodeStyling from "qr-code-styling";
+import { motion } from "framer-motion";
+import CategorySelector from "./CategorySelector";
+import VCardForm from "./VCardForm";
+import WifiForm from "./WifiForm";
+import ColorPicker from "./ColorPicker";
+import SizeSlider from "./SizeSlider";
+import FileUploader from "./FileUploader";
+import DownloadButton from "./DownloadButton";
+import toast from "react-hot-toast";
 
 export default function QRCodeGenerator() {
-  const [text, setText] = useState('');
-  const [color, setColor] = useState('#000000');
-  const [bgColor, setBgColor] = useState('#ffffff');
+  const [text, setText] = useState("");
+  const [color, setColor] = useState("#000000");
+  const [bgColor, setBgColor] = useState("#ffffff");
   const [logoFile, setLogoFile] = useState(null);
   const [size, setSize] = useState(300);
-  const [shape, setShape] = useState('square');
-  const [frame, setFrame] = useState('square');
-  const [eyeShape, setEyeShape] = useState('square');
-  const [eyeColor, setEyeColor] = useState('#000000');
-  const [category, setCategory] = useState('text');
+  const [shape, setShape] = useState("square");
+  const [frame, setFrame] = useState("square");
+  const [eyeShape, setEyeShape] = useState("square");
+  const [eyeColor, setEyeColor] = useState("#000000");
+  const [category, setCategory] = useState("text");
   const [vCardDetails, setVCardDetails] = useState({
-    fullName: '',
-    organization: '',
-    phone: '',
-    email: '',
+    fullName: "",
+    organization: "",
+    phone: "",
+    email: "",
   });
   const [wifiDetails, setWifiDetails] = useState({
-    ssid: '',
-    encryption: 'WPA',
-    password: '',
+    ssid: "",
+    encryption: "WPA",
+    password: "",
   });
 
   const qrCodeRef = useRef(null);
   const qrCodeInstance = useRef(null); // To keep QR code instance reference
-  const [downloadFormat, setDownloadFormat] = useState('png');
+  const [downloadFormat, setDownloadFormat] = useState("png");
   const [qrGenerated, setQrGenerated] = useState(false); // State to track if QR code is generated
 
   // Initialize QRCodeStyling instance once
   if (!qrCodeInstance.current) {
     qrCodeInstance.current = new QRCodeStyling({
       width: size,
       height: size,
-      data: '',
+      data: "",
       dotsOptions: { color: color, type: shape },
       cornersSquareOptions: { type: frame },
       cornersDotOptions: { type: eyeShape, color: eyeColor },
@@ -52,26 +52,34 @@ export default function QRCodeGenerator() {
   }
 
   const handleGenerate = async () => {
-
     // Check for required fields based on selected category
-    if (category === 'vCard') {
-      if (!vCardDetails.fullName || !vCardDetails.organization || !vCardDetails.phone || !vCardDetails.email) {
+    if (category === "vCard") {
+      if (
+        !vCardDetails.fullName ||
+        !vCardDetails.organization ||
+        !vCardDetails.phone ||
+        !vCardDetails.email
+      ) {
         toast.error("Please fill in all fields for vCard.");
         return;
       }
-      setText(`BEGIN:VCARD\nVERSION:3.0\nFN:${vCardDetails.fullName}\nORG:${vCardDetails.organization}\nTEL:${vCardDetails.phone}\nEMAIL:${vCardDetails.email}\nEND:VCARD`);
-    } else if (category === 'wifi') {
+      setText(
+        `BEGIN:VCARD\nVERSION:3.0\nFN:${vCardDetails.fullName}\nORG:${vCardDetails.organization}\nTEL:${vCardDetails.phone}\nEMAIL:${vCardDetails.email}\nEND:VCARD`
+      );
+    } else if (category === "wifi") {
       if (!wifiDetails.ssid || !wifiDetails.password) {
         toast.error("Please fill in the SSID and password for WiFi.");
         return;
       }
-      setText(`WIFI:T:${wifiDetails.encryption};S:${wifiDetails.ssid};P:${wifiDetails.password};;`);
-    } else if (category === 'text' || category === 'URL') {
+      setText(
+        `WIFI:T:${wifiDetails.encryption};S:${wifiDetails.ssid};P:${wifiDetails.password};;`
+      );
+    } else if (category === "text" || category === "URL") {
       if (!text.trim()) {
         toast.error("Text field is empty. Please enter valid data.");
         return;
       }
-    } else if ( category === 'URL') {
+    } else if (category === "URL") {
       if (!text.trim()) {
         toast.error("Please fill in URL field");
         return;
@@ -82,11 +90,11 @@ export default function QRCodeGenerator() {
 
     // Clear previous QR code if present
     if (qrCodeRef.current) {
-      qrCodeRef.current.innerHTML = '';
+      qrCodeRef.current.innerHTML = "";
     }
 
     // Create a promise to handle logo loading if applicable
-    const updateQRCode = (logoURL = '') => {
+    const updateQRCode = (logoURL = "") => {
       qrCodeInstance.current.update({
         data: text,
         dotsOptions: { color, type: shape },
@@ -117,27 +125,34 @@ export default function QRCodeGenerator() {
   };
 
   const handleDownload = () => {
-    qrCodeInstance.current.download({ name: "qr_code", extension: downloadFormat });
+    qrCodeInstance.current.download({
+      name: "qr_code",
+      extension: downloadFormat,
+    });
   };
 
   const handleCategoryChange = (category) => {
     setCategory(category);
     setQrGenerated(false); // Reset QR generated state
-    setText(''); // Clear text input
+    setText(""); // Clear text input
 
     // Clear previous QR code if present
     if (qrCodeRef.current) {
-      qrCodeRef.current.innerHTML = '';
+      qrCodeRef.current.innerHTML = "";
     }
 
-    if (category === 'vCard') {
-      setText(`BEGIN:VCARD\nVERSION:3.0\nFN:${vCardDetails.fullName}\nORG:${vCardDetails.organization}\nTEL:${vCardDetails.phone}\nEMAIL:${vCardDetails.email}\nEND:VCARD`);
-    } else if (category === 'URL') {
-      setText('');
-    } else if (category === 'wifi') {
-      setText(`WIFI:T:${wifiDetails.encryption};S:${wifiDetails.ssid};P:${wifiDetails.password};;`);
-    } else if (category === 'text') {
-      setText('');
+    if (category === "vCard") {
+      setText(
+        `BEGIN:VCARD\nVERSION:3.0\nFN:${vCardDetails.fullName}\nORG:${vCardDetails.organization}\nTEL:${vCardDetails.phone}\nEMAIL:${vCardDetails.email}\nEND:VCARD`
+      );
+    } else if (category === "URL") {
+      setText("");
+    } else if (category === "wifi") {
+      setText(
+        `WIFI:T:${wifiDetails.encryption};S:${wifiDetails.ssid};P:${wifiDetails.password};;`
+      );
+    } else if (category === "text") {
+      setText("");
     }
   };
 
@@ -146,32 +161,43 @@ export default function QRCodeGenerator() {
       className="p-8 max-w-lg mx-auto bg-purple-100 dark:bg-indigo-950 rounded-xl shadow-lg mt-10"
       initial={{ opacity: 0, scale: 1 }}
       animate={{ opacity: 1, scale: 1 }}
-      transition={{ duration: 0.5, ease: 'easeOut' }}
+      transition={{ duration: 0.5, ease: "easeOut" }}
       whileHover={{ scale: 1 }}
     >
       <motion.h1
         className="text-4xl font-bold mb-6 text-center text-gray-800 dark:text-gray-100"
         initial={{ opacity: 0, y: -20 }}
         animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 0.1, duration: 0.5, ease: 'easeOut' }}
+        transition={{ delay: 0.1, duration: 0.5, ease: "easeOut" }}
       >
         Generate QR Code
       </motion.h1>
 
-      <CategorySelector category={category} handleCategoryChange={handleCategoryChange} />
+      <CategorySelector
+        category={category}
+        handleCategoryChange={handleCategoryChange}
+      />
 
-      {category === 'vCard' && (
-        <VCardForm vCardDetails={vCardDetails} setVCardDetails={setVCardDetails} setText={setText} />
+      {category === "vCard" && (
+        <VCardForm
+          vCardDetails={vCardDetails}
+          setVCardDetails={setVCardDetails}
+          setText={setText}
+        />
       )}
-      {category === 'wifi' && (
-        <WifiForm wifiDetails={wifiDetails} setWifiDetails={setWifiDetails} setText={setText} />
+      {category === "wifi" && (
+        <WifiForm
+          wifiDetails={wifiDetails}
+          setWifiDetails={setWifiDetails}
+          setText={setText}
+        />
       )}
-      {(category === 'text' || category === 'URL') && (
+      {(category === "text" || category === "URL") && (
         <motion.div
           className="mb-6"
           initial={{ opacity: 0, x: -20 }}
           animate={{ opacity: 1, x: 0 }}
-          transition={{ delay: 0.2, duration: 0.5, ease: 'easeOut' }}
+          transition={{ delay: 0.2, duration: 0.5, ease: "easeOut" }}
         >
           <label className="block mb-2 text-gray-700 dark:text-gray-200 capitalize">
             {category} Input
@@ -210,14 +236,13 @@ export default function QRCodeGenerator() {
         whileTap={{ scale: 0.95 }}
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 0.3, duration: 0.5, ease: 'easeOut' }}
+        transition={{ delay: 0.3, duration: 0.5, ease: "easeOut" }}
       >
         Generate QR Code
       </motion.button>
 
-
       {/* QR code will appear only if it's been generated */}
-      <div className='flex justify-center items-center' ref={qrCodeRef}></div>
+      <div className="flex justify-center items-center" ref={qrCodeRef}></div>
 
       {/* Only show download options if QR code has been generated */}
       {qrGenerated && (