feat: qr code generation init

.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">{
+  <component name="PropertiesComponent"><![CDATA[{
-  &quot;keyToString&quot;: {
+  "keyToString": {
-    &quot;ASKED_ADD_EXTERNAL_FILES&quot;: &quot;true&quot;,
+    "ASKED_ADD_EXTERNAL_FILES": "true",
-    &quot;ASKED_SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
+    "ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
-    &quot;Docker.Dockerfile build.executor&quot;: &quot;Run&quot;,
+    "Docker.Dockerfile build.executor": "Run",
-    &quot;Docker.Dockerfile.executor&quot;: &quot;Run&quot;,
+    "Docker.Dockerfile.executor": "Run",
-    &quot;Playwright.Create transparent PNG.should make png color transparent.executor&quot;: &quot;Run&quot;,
+    "Playwright.Create transparent PNG.should make png color transparent.executor": "Run",
-    &quot;Playwright.JoinText Component.executor&quot;: &quot;Run&quot;,
+    "Playwright.JoinText Component.executor": "Run",
-    &quot;Playwright.JoinText Component.should merge text pieces with specified join character.executor&quot;: &quot;Run&quot;,
+    "Playwright.JoinText Component.should merge text pieces with specified join character.executor": "Run",
-    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
+    "RunOnceActivity.OpenProjectViewOnStart": "true",
-    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    "RunOnceActivity.ShowReadmeOnStart": "true",
-    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
+    "RunOnceActivity.git.unshallow": "true",
-    &quot;Vitest.compute function (1).executor&quot;: &quot;Run&quot;,
+    "Vitest.compute function (1).executor": "Run",
-    &quot;Vitest.compute function.executor&quot;: &quot;Run&quot;,
+    "Vitest.compute function.executor": "Run",
-    &quot;Vitest.mergeText.executor&quot;: &quot;Run&quot;,
+    "Vitest.mergeText.executor": "Run",
-    &quot;Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor&quot;: &quot;Run&quot;,
+    "Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor": "Run",
-    &quot;Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor&quot;: &quot;Run&quot;,
+    "Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor": "Run",
-    &quot;Vitest.parsePageRanges.executor&quot;: &quot;Run&quot;,
+    "Vitest.parsePageRanges.executor": "Run",
-    &quot;Vitest.removeDuplicateLines function.executor&quot;: &quot;Run&quot;,
+    "Vitest.removeDuplicateLines function.executor": "Run",
-    &quot;Vitest.removeDuplicateLines function.newlines option.executor&quot;: &quot;Run&quot;,
+    "Vitest.removeDuplicateLines function.newlines option.executor": "Run",
-    &quot;Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter.executor&quot;: &quot;Run&quot;,
+    "Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter.executor": "Run",
-    &quot;Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp.executor&quot;: &quot;Run&quot;,
+    "Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp.executor": "Run",
-    &quot;Vitest.replaceText function.executor&quot;: &quot;Run&quot;,
+    "Vitest.replaceText function.executor": "Run",
-    &quot;Vitest.timeBetweenDates.executor&quot;: &quot;Run&quot;,
+    "Vitest.timeBetweenDates.executor": "Run",
-    &quot;git-widget-placeholder&quot;: &quot;#131 on fork/ARRY7686/main&quot;,
+    "git-widget-placeholder": "main",
-    &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
+    "ignore.virus.scanning.warn.message": "true",
-    &quot;kotlin-language-version-configured&quot;: &quot;true&quot;,
+    "kotlin-language-version-configured": "true",
-    &quot;last_opened_file_path&quot;: &quot;C:/Users/Ibrahima/IdeaProjects/omni-tools/src&quot;,
+    "last_opened_file_path": "C:/Users/Ibrahima/IdeaProjects/omni-tools/src",
-    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    "node.js.detected.package.eslint": "true",
-    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    "node.js.detected.package.tslint": "true",
-    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    "node.js.selected.package.eslint": "(autodetect)",
-    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    "node.js.selected.package.tslint": "(autodetect)",
-    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    "nodejs_package_manager_path": "npm",
-    &quot;npm.build.executor&quot;: &quot;Run&quot;,
+    "npm.build.executor": "Run",
-    &quot;npm.dev.executor&quot;: &quot;Run&quot;,
+    "npm.dev.executor": "Run",
-    &quot;npm.lint.executor&quot;: &quot;Run&quot;,
+    "npm.lint.executor": "Run",
-    &quot;npm.prebuild.executor&quot;: &quot;Run&quot;,
+    "npm.prebuild.executor": "Run",
-    &quot;npm.script:create:tool.executor&quot;: &quot;Run&quot;,
+    "npm.script:create:tool.executor": "Run",
-    &quot;npm.test.executor&quot;: &quot;Run&quot;,
+    "npm.test.executor": "Run",
-    &quot;npm.test:e2e.executor&quot;: &quot;Run&quot;,
+    "npm.test:e2e.executor": "Run",
-    &quot;npm.test:e2e:run.executor&quot;: &quot;Run&quot;,
+    "npm.test:e2e:run.executor": "Run",
-    &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\prettier&quot;,
+    "prettierjs.PrettierConfiguration.Package": "C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\prettier",
-    &quot;project.structure.last.edited&quot;: &quot;Problems&quot;,
+    "project.structure.last.edited": "Problems",
-    &quot;project.structure.proportion&quot;: &quot;0.0&quot;,
+    "project.structure.proportion": "0.0",
-    &quot;project.structure.side.proportion&quot;: &quot;0.2&quot;,
+    "project.structure.side.proportion": "0.2",
-    &quot;settings.editor.selected.configurable&quot;: &quot;refactai_advanced_settings&quot;,
+    "settings.editor.selected.configurable": "refactai_advanced_settings",
-    &quot;ts.external.directory.path&quot;: &quot;C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib&quot;,
+    "ts.external.directory.path": "C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib",
-    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
+    "vue.rearranger.settings.migration": "true"
   }
-}</component>
+}]]></component>
   <component name="ReactDesignerToolWindowState">
     <option name="myId2Visible">
       <map>

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",

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",

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
 ];

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.'
+      }}
+    />
+  );
+}

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'))
+});

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;
+}