From 25397f2cf48225f6f8613d7a0ed86efa2c01cdb8 Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Thu, 5 Jun 2025 19:13:43 +0100
Subject: [PATCH 1/2] feat: qr code generation init

---
 .idea/workspace.xml                           | 106 ++--
 package-lock.json                             |  10 +
 package.json                                  |   1 +
 src/pages/tools/image/generic/index.ts        |   4 +-
 .../tools/image/generic/qr-code/index.tsx     | 516 ++++++++++++++++++
 src/pages/tools/image/generic/qr-code/meta.ts |  25 +
 .../tools/image/generic/qr-code/types.ts      |  51 ++
 7 files changed, 662 insertions(+), 51 deletions(-)
 create mode 100644 src/pages/tools/image/generic/qr-code/index.tsx
 create mode 100644 src/pages/tools/image/generic/qr-code/meta.ts
 create mode 100644 src/pages/tools/image/generic/qr-code/types.ts

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 6179760..fb61f29 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -5,7 +5,13 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: compute flow">
+      <change afterPath="$PROJECT_DIR$/src/pages/tools/image/generic/qr-code/index.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/tools/image/generic/qr-code/meta.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/pages/tools/image/generic/qr-code/types.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/image/generic/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/generic/index.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -22,7 +28,7 @@
     <option name="PUSH_AUTO_UPDATE" value="true" />
     <option name="RECENT_BRANCH_BY_REPOSITORY">
       <map>
-        <entry key="$PROJECT_DIR$" value="chesterkxng" />
+        <entry key="$PROJECT_DIR$" value="fork/m5lk3n/feature/base64" />
       </map>
     </option>
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
@@ -199,56 +205,56 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent">{
-  &quot;keyToString&quot;: {
-    &quot;ASKED_ADD_EXTERNAL_FILES&quot;: &quot;true&quot;,
-    &quot;ASKED_SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
-    &quot;Docker.Dockerfile build.executor&quot;: &quot;Run&quot;,
-    &quot;Docker.Dockerfile.executor&quot;: &quot;Run&quot;,
-    &quot;Playwright.Create transparent PNG.should make png color transparent.executor&quot;: &quot;Run&quot;,
-    &quot;Playwright.JoinText Component.executor&quot;: &quot;Run&quot;,
-    &quot;Playwright.JoinText Component.should merge text pieces with specified join character.executor&quot;: &quot;Run&quot;,
-    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
-    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
-    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
-    &quot;Vitest.compute function (1).executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.compute function.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.mergeText.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.parsePageRanges.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.removeDuplicateLines function.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.removeDuplicateLines function.newlines option.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.replaceText function.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.timeBetweenDates.executor&quot;: &quot;Run&quot;,
-    &quot;git-widget-placeholder&quot;: &quot;#131 on fork/ARRY7686/main&quot;,
-    &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
-    &quot;kotlin-language-version-configured&quot;: &quot;true&quot;,
-    &quot;last_opened_file_path&quot;: &quot;C:/Users/Ibrahima/IdeaProjects/omni-tools/src&quot;,
-    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
-    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
-    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
-    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
-    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
-    &quot;npm.build.executor&quot;: &quot;Run&quot;,
-    &quot;npm.dev.executor&quot;: &quot;Run&quot;,
-    &quot;npm.lint.executor&quot;: &quot;Run&quot;,
-    &quot;npm.prebuild.executor&quot;: &quot;Run&quot;,
-    &quot;npm.script:create:tool.executor&quot;: &quot;Run&quot;,
-    &quot;npm.test.executor&quot;: &quot;Run&quot;,
-    &quot;npm.test:e2e.executor&quot;: &quot;Run&quot;,
-    &quot;npm.test:e2e:run.executor&quot;: &quot;Run&quot;,
-    &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\prettier&quot;,
-    &quot;project.structure.last.edited&quot;: &quot;Problems&quot;,
-    &quot;project.structure.proportion&quot;: &quot;0.0&quot;,
-    &quot;project.structure.side.proportion&quot;: &quot;0.2&quot;,
-    &quot;settings.editor.selected.configurable&quot;: &quot;refactai_advanced_settings&quot;,
-    &quot;ts.external.directory.path&quot;: &quot;C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib&quot;,
-    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "ASKED_ADD_EXTERNAL_FILES": "true",
+    "ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
+    "Docker.Dockerfile build.executor": "Run",
+    "Docker.Dockerfile.executor": "Run",
+    "Playwright.Create transparent PNG.should make png color transparent.executor": "Run",
+    "Playwright.JoinText Component.executor": "Run",
+    "Playwright.JoinText Component.should merge text pieces with specified join character.executor": "Run",
+    "RunOnceActivity.OpenProjectViewOnStart": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "RunOnceActivity.git.unshallow": "true",
+    "Vitest.compute function (1).executor": "Run",
+    "Vitest.compute function.executor": "Run",
+    "Vitest.mergeText.executor": "Run",
+    "Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor": "Run",
+    "Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor": "Run",
+    "Vitest.parsePageRanges.executor": "Run",
+    "Vitest.removeDuplicateLines function.executor": "Run",
+    "Vitest.removeDuplicateLines function.newlines option.executor": "Run",
+    "Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter.executor": "Run",
+    "Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp.executor": "Run",
+    "Vitest.replaceText function.executor": "Run",
+    "Vitest.timeBetweenDates.executor": "Run",
+    "git-widget-placeholder": "main",
+    "ignore.virus.scanning.warn.message": "true",
+    "kotlin-language-version-configured": "true",
+    "last_opened_file_path": "C:/Users/Ibrahima/IdeaProjects/omni-tools/src",
+    "node.js.detected.package.eslint": "true",
+    "node.js.detected.package.tslint": "true",
+    "node.js.selected.package.eslint": "(autodetect)",
+    "node.js.selected.package.tslint": "(autodetect)",
+    "nodejs_package_manager_path": "npm",
+    "npm.build.executor": "Run",
+    "npm.dev.executor": "Run",
+    "npm.lint.executor": "Run",
+    "npm.prebuild.executor": "Run",
+    "npm.script:create:tool.executor": "Run",
+    "npm.test.executor": "Run",
+    "npm.test:e2e.executor": "Run",
+    "npm.test:e2e:run.executor": "Run",
+    "prettierjs.PrettierConfiguration.Package": "C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\prettier",
+    "project.structure.last.edited": "Problems",
+    "project.structure.proportion": "0.0",
+    "project.structure.side.proportion": "0.2",
+    "settings.editor.selected.configurable": "refactai_advanced_settings",
+    "ts.external.directory.path": "C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib",
+    "vue.rearranger.settings.migration": "true"
   }
-}</component>
+}]]></component>
   <component name="ReactDesignerToolWindowState">
     <option name="myId2Visible">
       <map>
diff --git a/package-lock.json b/package-lock.json
index 9f5b3c2..49caad8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,6 +41,7 @@
         "pdf-lib": "^1.17.1",
         "pdfjs-dist": "^5.2.133",
         "playwright": "^1.45.0",
+        "qrcode.react": "^4.2.0",
         "rc-slider": "^11.1.8",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -9129,6 +9130,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/qrcode.react": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.2.0.tgz",
+      "integrity": "sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
diff --git a/package.json b/package.json
index 7e43cbe..7d97d6e 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "pdf-lib": "^1.17.1",
     "pdfjs-dist": "^5.2.133",
     "playwright": "^1.45.0",
+    "qrcode.react": "^4.2.0",
     "rc-slider": "^11.1.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/src/pages/tools/image/generic/index.ts b/src/pages/tools/image/generic/index.ts
index fc18106..45d4618 100644
--- a/src/pages/tools/image/generic/index.ts
+++ b/src/pages/tools/image/generic/index.ts
@@ -6,6 +6,7 @@ import { tool as cropImage } from './crop/meta';
 import { tool as changeOpacity } from './change-opacity/meta';
 import { tool as createTransparent } from './create-transparent/meta';
 import { tool as imageToText } from './image-to-text/meta';
+import { tool as qrCodeGenerator } from './qr-code/meta';
 
 export const imageGenericTools = [
   resizeImage,
@@ -15,5 +16,6 @@ export const imageGenericTools = [
   changeOpacity,
   changeColors,
   createTransparent,
-  imageToText
+  imageToText,
+  qrCodeGenerator
 ];
diff --git a/src/pages/tools/image/generic/qr-code/index.tsx b/src/pages/tools/image/generic/qr-code/index.tsx
new file mode 100644
index 0000000..6f85ba6
--- /dev/null
+++ b/src/pages/tools/image/generic/qr-code/index.tsx
@@ -0,0 +1,516 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Button, MenuItem, TextField, Typography } from '@mui/material';
+import * as Yup from 'yup';
+import { QRCodeSVG } from 'qrcode.react';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
+import { GetGroupsType } from '@components/options/ToolOptions';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import { InitialValuesType, QRCodeType, WifiEncryptionType } from './types';
+import ColorSelector from '@components/options/ColorSelector';
+
+const initialValues: InitialValuesType = {
+  qrCodeType: 'URL',
+
+  // Common settings
+  size: '200',
+  bgColor: '#FFFFFF',
+  fgColor: '#000000',
+
+  // URL
+  url: 'https://example.com',
+
+  // Text
+  text: '',
+
+  // Email
+  emailAddress: '',
+  emailSubject: '',
+  emailBody: '',
+
+  // Phone
+  phoneNumber: '',
+
+  // SMS
+  smsNumber: '',
+  smsMessage: '',
+
+  // WiFi
+  wifiSsid: '',
+  wifiPassword: '',
+  wifiEncryption: 'WPA/WPA2',
+
+  // vCard
+  vCardName: '',
+  vCardEmail: '',
+  vCardPhone: '',
+  vCardAddress: '',
+  vCardCompany: '',
+  vCardTitle: '',
+  vCardWebsite: ''
+};
+
+// Function to format the QR code data based on the type
+const formatQRCodeData = (values: InitialValuesType): string => {
+  switch (values.qrCodeType) {
+    case 'URL':
+      return values.url;
+
+    case 'Text':
+      return values.text;
+
+    case 'Email': {
+      let emailData = `mailto:${values.emailAddress}`;
+      if (values.emailSubject || values.emailBody) {
+        emailData += '?';
+        if (values.emailSubject) {
+          emailData += `subject=${encodeURIComponent(values.emailSubject)}`;
+        }
+        if (values.emailBody) {
+          emailData += `${
+            values.emailSubject ? '&' : ''
+          }body=${encodeURIComponent(values.emailBody)}`;
+        }
+      }
+      return emailData;
+    }
+    case 'Phone':
+      return `tel:${values.phoneNumber}`;
+
+    case 'SMS':
+      return `sms:${values.smsNumber}${
+        values.smsMessage
+          ? `?body=${encodeURIComponent(values.smsMessage)}`
+          : ''
+      }`;
+
+    case 'WiFi': {
+      const encryption =
+        values.wifiEncryption === 'None' ? 'nopass' : values.wifiEncryption;
+      return `WIFI:T:${encryption};S:${values.wifiSsid};P:${values.wifiPassword};;`;
+    }
+    case 'vCard':
+      return `BEGIN:VCARD
+VERSION:3.0
+N:${values.vCardName}
+FN:${values.vCardName}
+ORG:${values.vCardCompany}
+TITLE:${values.vCardTitle}
+TEL:${values.vCardPhone}
+EMAIL:${values.vCardEmail}
+ADR:${values.vCardAddress}
+URL:${values.vCardWebsite}
+END:VCARD`;
+
+    default:
+      return '';
+  }
+};
+
+const validationSchema = Yup.object().shape({
+  qrCodeType: Yup.string().required('QR code type is required'),
+  size: Yup.number()
+    .min(100, 'Size must be at least 100px')
+    .max(1000, 'Size must be at most 1000px')
+    .required('Size is required'),
+  bgColor: Yup.string().required('Background color is required'),
+  fgColor: Yup.string().required('Foreground color is required'),
+
+  // URL
+  url: Yup.string().when('qrCodeType', {
+    is: 'URL',
+    then: (schema) =>
+      schema.url('Please enter a valid URL').required('URL is required')
+  }),
+
+  // Text
+  text: Yup.string().when('qrCodeType', {
+    is: 'Text',
+    then: (schema) => schema.required('Text is required')
+  }),
+
+  // Email
+  emailAddress: Yup.string().when('qrCodeType', {
+    is: 'Email',
+    then: (schema) =>
+      schema
+        .email('Please enter a valid email address')
+        .required('Email address is required')
+  }),
+
+  // Phone
+  phoneNumber: Yup.string().when('qrCodeType', {
+    is: 'Phone',
+    then: (schema) => schema.required('Phone number is required')
+  }),
+
+  // SMS
+  smsNumber: Yup.string().when('qrCodeType', {
+    is: 'SMS',
+    then: (schema) => schema.required('Phone number is required')
+  }),
+
+  // WiFi
+  wifiSsid: Yup.string().when('qrCodeType', {
+    is: 'WiFi',
+    then: (schema) => schema.required('SSID is required')
+  }),
+
+  // vCard
+  vCardName: Yup.string().when('qrCodeType', {
+    is: 'vCard',
+    then: (schema) => schema.required('Name is required')
+  })
+});
+
+export default function QRCodeGenerator({ title }: ToolComponentProps) {
+  const [qrValue, setQRValue] = useState<string>('');
+  const [currentValues, setCurrentValues] =
+    useState<InitialValuesType>(initialValues);
+
+  // Update QR code value when form values change
+  useEffect(() => {
+    setQRValue(formatQRCodeData(currentValues));
+  }, [currentValues]);
+
+  const getGroups: GetGroupsType<InitialValuesType> = ({
+    values,
+    updateField
+  }) => {
+    // Update current values for QR code preview
+    setCurrentValues(values);
+
+    return [
+      {
+        title: 'QR Code Type',
+        component: (
+          <Box>
+            <TextField
+              select
+              fullWidth
+              value={values.qrCodeType}
+              onChange={(e) =>
+                updateField('qrCodeType', e.target.value as QRCodeType)
+              }
+              label="Select QR Code Type"
+              margin="normal"
+            >
+              <MenuItem value="URL">URL</MenuItem>
+              <MenuItem value="Text">Text</MenuItem>
+              <MenuItem value="Email">Email</MenuItem>
+              <MenuItem value="Phone">Phone</MenuItem>
+              <MenuItem value="SMS">SMS</MenuItem>
+              <MenuItem value="WiFi">WiFi</MenuItem>
+              <MenuItem value="vCard">vCard (Contact)</MenuItem>
+            </TextField>
+          </Box>
+        )
+      },
+      {
+        title: 'QR Code Settings',
+        component: (
+          <Box>
+            <TextFieldWithDesc
+              value={values.size}
+              onOwnChange={(val) => updateField('size', val)}
+              description="Size in pixels (100-1000)"
+              inputProps={{
+                type: 'number',
+                min: 100,
+                max: 1000
+              }}
+            />
+            <ColorSelector
+              description="Background Color"
+              value={values.bgColor}
+              onColorChange={(val) => updateField('bgColor', val)}
+            />
+            <ColorSelector
+              description="Foreground Color"
+              value={values.fgColor}
+              onColorChange={(val) => updateField('fgColor', val)}
+            />
+          </Box>
+        )
+      },
+      // Dynamic form fields based on QR code type
+      {
+        title: `${values.qrCodeType} Details`,
+        component: (
+          <Box>
+            {values.qrCodeType === 'URL' && (
+              <TextFieldWithDesc
+                value={values.url}
+                onOwnChange={(val) => updateField('url', val)}
+                description="Enter the URL"
+                inputProps={{
+                  placeholder: 'https://example.com'
+                }}
+              />
+            )}
+
+            {values.qrCodeType === 'Text' && (
+              <TextFieldWithDesc
+                value={values.text}
+                onOwnChange={(val) => updateField('text', val)}
+                description="Enter the text"
+                multiline
+                rows={4}
+                inputProps={{
+                  placeholder: 'Enter your text here'
+                }}
+              />
+            )}
+
+            {values.qrCodeType === 'Email' && (
+              <>
+                <TextFieldWithDesc
+                  value={values.emailAddress}
+                  onOwnChange={(val) => updateField('emailAddress', val)}
+                  description="Email Address"
+                  inputProps={{
+                    placeholder: 'example@example.com',
+                    type: 'email'
+                  }}
+                />
+                <TextFieldWithDesc
+                  value={values.emailSubject}
+                  onOwnChange={(val) => updateField('emailSubject', val)}
+                  description="Email Subject (optional)"
+                  inputProps={{
+                    placeholder: 'Subject line'
+                  }}
+                />
+                <TextFieldWithDesc
+                  value={values.emailBody}
+                  onOwnChange={(val) => updateField('emailBody', val)}
+                  description="Email Body (optional)"
+                  multiline
+                  rows={4}
+                  inputProps={{
+                    placeholder: 'Body text'
+                  }}
+                />
+              </>
+            )}
+
+            {values.qrCodeType === 'Phone' && (
+              <TextFieldWithDesc
+                value={values.phoneNumber}
+                onOwnChange={(val) => updateField('phoneNumber', val)}
+                description="Phone Number"
+                inputProps={{
+                  placeholder: '+1234567890',
+                  type: 'tel'
+                }}
+              />
+            )}
+
+            {values.qrCodeType === 'SMS' && (
+              <>
+                <TextFieldWithDesc
+                  value={values.smsNumber}
+                  onOwnChange={(val) => updateField('smsNumber', val)}
+                  description="Phone Number"
+                  inputProps={{
+                    placeholder: '+1234567890',
+                    type: 'tel'
+                  }}
+                />
+                <TextFieldWithDesc
+                  value={values.smsMessage}
+                  onOwnChange={(val) => updateField('smsMessage', val)}
+                  description="Message (optional)"
+                  multiline
+                  rows={4}
+                  inputProps={{
+                    placeholder: 'Your message here'
+                  }}
+                />
+              </>
+            )}
+
+            {values.qrCodeType === 'WiFi' && (
+              <>
+                <TextFieldWithDesc
+                  value={values.wifiSsid}
+                  onOwnChange={(val) => updateField('wifiSsid', val)}
+                  description="Network Name (SSID)"
+                  inputProps={{
+                    placeholder: 'Network name'
+                  }}
+                />
+                <TextFieldWithDesc
+                  value={values.wifiPassword}
+                  onOwnChange={(val) => updateField('wifiPassword', val)}
+                  description="Password"
+                  inputProps={{
+                    placeholder: 'Password',
+                    type: 'password'
+                  }}
+                />
+                <TextField
+                  select
+                  fullWidth
+                  value={values.wifiEncryption}
+                  onChange={(e) =>
+                    updateField(
+                      'wifiEncryption',
+                      e.target.value as WifiEncryptionType
+                    )
+                  }
+                  label="Encryption Type"
+                  margin="normal"
+                >
+                  <MenuItem value="WPA/WPA2">WPA/WPA2</MenuItem>
+                  <MenuItem value="WEP">WEP</MenuItem>
+                  <MenuItem value="None">None</MenuItem>
+                </TextField>
+              </>
+            )}
+
+            {values.qrCodeType === 'vCard' && (
+              <>
+                <TextFieldWithDesc
+                  value={values.vCardName}
+                  onOwnChange={(val) => updateField('vCardName', val)}
+                  description="Full Name"
+                  inputProps={{
+                    placeholder: 'John Doe'
+                  }}
+                />
+                <TextFieldWithDesc
+                  value={values.vCardEmail}
+                  onOwnChange={(val) => updateField('vCardEmail', val)}
+                  description="Email"
+                  inputProps={{
+                    placeholder: 'john@example.com',
+                    type: 'email'
+                  }}
+                />
+                <TextFieldWithDesc
+                  value={values.vCardPhone}
+                  onOwnChange={(val) => updateField('vCardPhone', val)}
+                  description="Phone"
+                  inputProps={{
+                    placeholder: '+1234567890',
+                    type: 'tel'
+                  }}
+                />
+                <TextFieldWithDesc
+                  value={values.vCardAddress}
+                  onOwnChange={(val) => updateField('vCardAddress', val)}
+                  description="Address"
+                  inputProps={{
+                    placeholder: '123 Main St, City, Country'
+                  }}
+                />
+                <TextFieldWithDesc
+                  value={values.vCardCompany}
+                  onOwnChange={(val) => updateField('vCardCompany', val)}
+                  description="Company (optional)"
+                  inputProps={{
+                    placeholder: 'Company name'
+                  }}
+                />
+                <TextFieldWithDesc
+                  value={values.vCardTitle}
+                  onOwnChange={(val) => updateField('vCardTitle', val)}
+                  description="Job Title (optional)"
+                  inputProps={{
+                    placeholder: 'Software Developer'
+                  }}
+                />
+                <TextFieldWithDesc
+                  value={values.vCardWebsite}
+                  onOwnChange={(val) => updateField('vCardWebsite', val)}
+                  description="Website (optional)"
+                  inputProps={{
+                    placeholder: 'https://example.com'
+                  }}
+                />
+              </>
+            )}
+          </Box>
+        )
+      }
+    ];
+  };
+
+  // Save QR code as image
+  const saveQRCode = () => {
+    const svg = document.getElementById('qr-code-svg');
+    if (!svg) return;
+
+    const svgData = new XMLSerializer().serializeToString(svg);
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    const img = new Image();
+
+    img.onload = () => {
+      canvas.width = img.width;
+      canvas.height = img.height;
+      ctx?.drawImage(img, 0, 0);
+      const pngFile = canvas.toDataURL('image/png');
+
+      const downloadLink = document.createElement('a');
+      downloadLink.download = 'qrcode.png';
+      downloadLink.href = pngFile;
+      downloadLink.click();
+    };
+
+    img.src =
+      'data:image/svg+xml;base64,' +
+      btoa(unescape(encodeURIComponent(svgData)));
+  };
+
+  return (
+    <ToolContent
+      title={title}
+      initialValues={initialValues}
+      getGroups={getGroups}
+      validationSchema={validationSchema}
+      compute={() => {}}
+      inputComponent={
+        <Box
+          sx={{
+            p: 2,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: 2
+          }}
+        >
+          <Typography variant="h6">QR Code Preview</Typography>
+          <Box sx={{ border: '1px solid #ddd', padding: 2, borderRadius: 1 }}>
+            {qrValue && (
+              <QRCodeSVG
+                id="qr-code-svg"
+                value={qrValue}
+                size={Number(currentValues.size) || 200}
+                bgColor={currentValues.bgColor}
+                fgColor={currentValues.fgColor}
+                level="H"
+                includeMargin
+              />
+            )}
+          </Box>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={saveQRCode}
+            disabled={!qrValue}
+          >
+            Download QR Code
+          </Button>
+        </Box>
+      }
+      resultComponent={null}
+      toolInfo={{
+        title: 'QR Code Generator',
+        description:
+          'Generate QR codes for different data types: URL, Text, Email, Phone, SMS, WiFi, vCard, and more. Customize the size and colors to create the perfect QR code for your needs.'
+      }}
+    />
+  );
+}
diff --git a/src/pages/tools/image/generic/qr-code/meta.ts b/src/pages/tools/image/generic/qr-code/meta.ts
new file mode 100644
index 0000000..302e526
--- /dev/null
+++ b/src/pages/tools/image/generic/qr-code/meta.ts
@@ -0,0 +1,25 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+
+export const tool = defineTool('image-generic', {
+  name: 'QR Code Generator',
+  path: 'qr-code',
+  icon: 'mdi:qrcode', // Iconify icon as a string
+  description:
+    'Generate QR codes for different data types: URL, Text, Email, Phone, SMS, WiFi, vCard, and more.',
+  shortDescription: 'Create customized QR codes for various data formats.',
+  keywords: [
+    'qr code',
+    'qrcode',
+    'generator',
+    'url',
+    'text',
+    'email',
+    'phone',
+    'sms',
+    'wifi',
+    'vcard',
+    'contact'
+  ],
+  component: lazy(() => import('./index'))
+});
diff --git a/src/pages/tools/image/generic/qr-code/types.ts b/src/pages/tools/image/generic/qr-code/types.ts
new file mode 100644
index 0000000..c2f98be
--- /dev/null
+++ b/src/pages/tools/image/generic/qr-code/types.ts
@@ -0,0 +1,51 @@
+export type QRCodeType =
+  | 'URL'
+  | 'Text'
+  | 'Email'
+  | 'Phone'
+  | 'SMS'
+  | 'WiFi'
+  | 'vCard';
+
+export type WifiEncryptionType = 'WPA/WPA2' | 'WEP' | 'None';
+
+export interface InitialValuesType {
+  qrCodeType: QRCodeType;
+
+  // Common settings
+  size: string;
+  bgColor: string;
+  fgColor: string;
+
+  // URL
+  url: string;
+
+  // Text
+  text: string;
+
+  // Email
+  emailAddress: string;
+  emailSubject: string;
+  emailBody: string;
+
+  // Phone
+  phoneNumber: string;
+
+  // SMS
+  smsNumber: string;
+  smsMessage: string;
+
+  // WiFi
+  wifiSsid: string;
+  wifiPassword: string;
+  wifiEncryption: WifiEncryptionType;
+
+  // vCard
+  vCardName: string;
+  vCardEmail: string;
+  vCardPhone: string;
+  vCardAddress: string;
+  vCardCompany: string;
+  vCardTitle: string;
+  vCardWebsite: string;
+}

From 6ed0f95f889cc4aa70f776b103d5df21e62642c9 Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Thu, 5 Jun 2025 19:51:02 +0100
Subject: [PATCH 2/2] feat: qr code

---
 .idea/workspace.xml                           |  34 ++-
 package-lock.json                             | 238 ++++++++++++++++--
 package.json                                  |   3 +-
 src/components/options/ColorSelector.tsx      |   2 +-
 .../tools/image/generic/qr-code/index.tsx     | 104 +++-----
 5 files changed, 273 insertions(+), 108 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index fb61f29..02eecf5 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,14 +4,12 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: compute flow">
-      <change afterPath="$PROJECT_DIR$/src/pages/tools/image/generic/qr-code/index.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/pages/tools/image/generic/qr-code/meta.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/pages/tools/image/generic/qr-code/types.ts" afterDir="false" />
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: qr code generation init">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools/image/generic/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/generic/index.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/options/ColorSelector.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/ColorSelector.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/image/generic/qr-code/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/image/generic/qr-code/index.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -28,7 +26,7 @@
     <option name="PUSH_AUTO_UPDATE" value="true" />
     <option name="RECENT_BRANCH_BY_REPOSITORY">
       <map>
-        <entry key="$PROJECT_DIR$" value="fork/m5lk3n/feature/base64" />
+        <entry key="$PROJECT_DIR$" value="main" />
       </map>
     </option>
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
@@ -229,7 +227,7 @@
     "Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp.executor": "Run",
     "Vitest.replaceText function.executor": "Run",
     "Vitest.timeBetweenDates.executor": "Run",
-    "git-widget-placeholder": "main",
+    "git-widget-placeholder": "qr-code",
     "ignore.virus.scanning.warn.message": "true",
     "kotlin-language-version-configured": "true",
     "last_opened_file_path": "C:/Users/Ibrahima/IdeaProjects/omni-tools/src",
@@ -469,14 +467,6 @@
       <workItem from="1748282636141" duration="478000" />
       <workItem from="1749047510481" duration="879000" />
     </task>
-    <task id="LOCAL-00151" summary="feat: crop png">
-      <option name="closed" value="true" />
-      <created>1741487735223</created>
-      <option name="number" value="00151" />
-      <option name="presentableId" value="LOCAL-00151" />
-      <option name="project" value="LOCAL" />
-      <updated>1741487735223</updated>
-    </task>
     <task id="LOCAL-00152" summary="feat: crop png">
       <option name="closed" value="true" />
       <created>1741492688761</created>
@@ -861,7 +851,15 @@
       <option name="project" value="LOCAL" />
       <updated>1748881153433</updated>
     </task>
-    <option name="localTasksCounter" value="200" />
+    <task id="LOCAL-00200" summary="feat: qr code generation init">
+      <option name="closed" value="true" />
+      <created>1749147227565</created>
+      <option name="number" value="00200" />
+      <option name="presentableId" value="LOCAL-00200" />
+      <option name="project" value="LOCAL" />
+      <updated>1749147227565</updated>
+    </task>
+    <option name="localTasksCounter" value="201" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -908,7 +906,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="chore: compress video icon" />
     <MESSAGE value="fix: gif speed" />
     <MESSAGE value="fix: tsc" />
     <MESSAGE value="fix: background color" />
@@ -933,7 +930,8 @@
     <MESSAGE value="fix: misc" />
     <MESSAGE value="chore: remove unnecessary prop" />
     <MESSAGE value="fix: compute flow" />
-    <option name="LAST_COMMIT_MESSAGE" value="fix: compute flow" />
+    <MESSAGE value="feat: qr code generation init" />
+    <option name="LAST_COMMIT_MESSAGE" value="feat: qr code generation init" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/package-lock.json b/package-lock.json
index 49caad8..e501cc8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,7 +41,7 @@
         "pdf-lib": "^1.17.1",
         "pdfjs-dist": "^5.2.133",
         "playwright": "^1.45.0",
-        "qrcode.react": "^4.2.0",
+        "qrcode": "^1.5.4",
         "rc-slider": "^11.1.8",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -62,6 +62,7 @@
         "@types/color": "^3.0.6",
         "@types/color-rgba": "^2.1.2",
         "@types/node": "^20.12.12",
+        "@types/qrcode": "^1.5.5",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "@types/react-helmet": "^6.1.11",
@@ -3370,6 +3371,16 @@
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
       "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
     },
+    "node_modules/@types/qrcode": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.5.tgz",
+      "integrity": "sha512-CdfBi/e3Qk+3Z/fXYShipBT13OJ2fDO2Q2w5CIP5anLTLIndQG9z6P1cnm+8zCWSpm5dnxMFd/uREtb0EXuQzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/react": {
       "version": "18.3.3",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
@@ -3868,7 +3879,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -3877,7 +3887,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -4376,6 +4385,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/camelcase-css": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
@@ -4922,6 +4940,15 @@
         }
       }
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/deep-eql": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.4.tgz",
@@ -5046,6 +5073,12 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -6106,7 +6139,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-      "dev": true,
       "engines": {
         "node": "6.* || 8.* || >= 10.*"
       }
@@ -6849,7 +6881,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -8479,6 +8510,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/package-json-from-dist": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
@@ -8547,7 +8587,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -9130,13 +9169,168 @@
         "node": ">=6"
       }
     },
-    "node_modules/qrcode.react": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.2.0.tgz",
-      "integrity": "sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA==",
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
       "license": "ISC",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
+    "node_modules/qrcode/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/qrcode/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
+    "node_modules/qrcode/node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qrcode/node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
       }
     },
     "node_modules/queue-microtask": {
@@ -9422,7 +9616,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
       "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9436,6 +9629,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
     "node_modules/resolve": {
       "version": "2.0.0-next.5",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
@@ -9676,6 +9875,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -10207,7 +10412,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -11213,6 +11417,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
     "node_modules/which-typed-array": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
diff --git a/package.json b/package.json
index 7d97d6e..ed7ebcf 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,7 @@
     "pdf-lib": "^1.17.1",
     "pdfjs-dist": "^5.2.133",
     "playwright": "^1.45.0",
-    "qrcode.react": "^4.2.0",
+    "qrcode": "^1.5.4",
     "rc-slider": "^11.1.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -79,6 +79,7 @@
     "@types/color": "^3.0.6",
     "@types/color-rgba": "^2.1.2",
     "@types/node": "^20.12.12",
+    "@types/qrcode": "^1.5.5",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-helmet": "^6.1.11",
diff --git a/src/components/options/ColorSelector.tsx b/src/components/options/ColorSelector.tsx
index a89ea1d..a24cf40 100644
--- a/src/components/options/ColorSelector.tsx
+++ b/src/components/options/ColorSelector.tsx
@@ -39,7 +39,7 @@ const ColorSelector: React.FC<ColorSelectorProps & TextFieldProps> = ({
           <PaletteIcon />
         </IconButton>
         <TextField
-          style={{ display: 'none' }}
+          style={{ visibility: 'hidden' }}
           inputRef={inputRef}
           type="color"
           value={color}
diff --git a/src/pages/tools/image/generic/qr-code/index.tsx b/src/pages/tools/image/generic/qr-code/index.tsx
index 6f85ba6..15e3bbf 100644
--- a/src/pages/tools/image/generic/qr-code/index.tsx
+++ b/src/pages/tools/image/generic/qr-code/index.tsx
@@ -1,13 +1,15 @@
-import React, { useEffect, useState } from 'react';
-import { Box, Button, MenuItem, TextField, Typography } from '@mui/material';
+import React, { useCallback, useState } from 'react';
+import { Box, MenuItem, TextField } from '@mui/material';
 import * as Yup from 'yup';
-import { QRCodeSVG } from 'qrcode.react';
 import ToolContent from '@components/ToolContent';
 import { ToolComponentProps } from '@tools/defineTool';
 import { GetGroupsType } from '@components/options/ToolOptions';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 import { InitialValuesType, QRCodeType, WifiEncryptionType } from './types';
 import ColorSelector from '@components/options/ColorSelector';
+import ToolFileResult from '@components/result/ToolFileResult';
+import * as QRCode from 'qrcode';
+import { debounce } from 'lodash';
 
 const initialValues: InitialValuesType = {
   qrCodeType: 'URL',
@@ -164,22 +166,11 @@ const validationSchema = Yup.object().shape({
 });
 
 export default function QRCodeGenerator({ title }: ToolComponentProps) {
-  const [qrValue, setQRValue] = useState<string>('');
-  const [currentValues, setCurrentValues] =
-    useState<InitialValuesType>(initialValues);
-
-  // Update QR code value when form values change
-  useEffect(() => {
-    setQRValue(formatQRCodeData(currentValues));
-  }, [currentValues]);
-
+  const [result, setResult] = useState<File | null>(null);
   const getGroups: GetGroupsType<InitialValuesType> = ({
     values,
     updateField
   }) => {
-    // Update current values for QR code preview
-    setCurrentValues(values);
-
     return [
       {
         title: 'QR Code Type',
@@ -437,32 +428,29 @@ export default function QRCodeGenerator({ title }: ToolComponentProps) {
     ];
   };
 
-  // Save QR code as image
-  const saveQRCode = () => {
-    const svg = document.getElementById('qr-code-svg');
-    if (!svg) return;
-
-    const svgData = new XMLSerializer().serializeToString(svg);
+  const compute = async (options: InitialValuesType) => {
+    const qrValue = formatQRCodeData(options);
+    if (!qrValue) return;
     const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    const img = new Image();
-
-    img.onload = () => {
-      canvas.width = img.width;
-      canvas.height = img.height;
-      ctx?.drawImage(img, 0, 0);
-      const pngFile = canvas.toDataURL('image/png');
-
-      const downloadLink = document.createElement('a');
-      downloadLink.download = 'qrcode.png';
-      downloadLink.href = pngFile;
-      downloadLink.click();
-    };
-
-    img.src =
-      'data:image/svg+xml;base64,' +
-      btoa(unescape(encodeURIComponent(svgData)));
+    QRCode.toDataURL(
+      canvas,
+      qrValue,
+      {
+        color: {
+          dark: options.fgColor,
+          light: options.bgColor
+        },
+        width: Number(options.size) || 200
+      },
+      async (error, url) => {
+        const res = await fetch(url);
+        const blob = await res.blob();
+        const file = new File([blob], 'Qr code.png', { type: 'image/png' });
+        setResult(file);
+      }
+    );
   };
+  const debouncedCompute = useCallback(debounce(compute, 1000), []);
 
   return (
     <ToolContent
@@ -470,42 +458,10 @@ export default function QRCodeGenerator({ title }: ToolComponentProps) {
       initialValues={initialValues}
       getGroups={getGroups}
       validationSchema={validationSchema}
-      compute={() => {}}
-      inputComponent={
-        <Box
-          sx={{
-            p: 2,
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            gap: 2
-          }}
-        >
-          <Typography variant="h6">QR Code Preview</Typography>
-          <Box sx={{ border: '1px solid #ddd', padding: 2, borderRadius: 1 }}>
-            {qrValue && (
-              <QRCodeSVG
-                id="qr-code-svg"
-                value={qrValue}
-                size={Number(currentValues.size) || 200}
-                bgColor={currentValues.bgColor}
-                fgColor={currentValues.fgColor}
-                level="H"
-                includeMargin
-              />
-            )}
-          </Box>
-          <Button
-            variant="contained"
-            color="primary"
-            onClick={saveQRCode}
-            disabled={!qrValue}
-          >
-            Download QR Code
-          </Button>
-        </Box>
+      compute={debouncedCompute}
+      resultComponent={
+        <ToolFileResult title={'Generated QR code'} value={result} />
       }
-      resultComponent={null}
       toolInfo={{
         title: 'QR Code Generator',
         description: