qr code generator

CorentinTh · Sep 3, 2024 · 8e4a220 · 8e4a220
1 parent ff46f17
commit 8e4a220
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/locales/de.yml b/locales/de.yml
@@ -299,6 +299,13 @@ tools:
     description: >-
       Generiere und downloade QR-Codes für eine URL oder einfach einen Text und
       passe die Hintergrund- und Vordergrundfarben an.
+    text: 'Text:'
+    placeholder: Dein Link oder Text...
+    foreground-color: 'Vordergrundfarbe:'
+    background-color: 'Hintergrundfarbe:'
+    error-resistance: 'Fehlerresistenz:'
+    button:
+      download: QR-Code herunterladen
   wifi-qrcode-generator:
     title: WLAN-QR-Code-Generator
     description: >-

diff --git a/locales/en.yml b/locales/en.yml
@@ -281,6 +281,13 @@ tools:
     description: >-
       Generate and download a QR code for a URL (or just plain text), and
       customize the background and foreground colors.
+    error-resistance: 'Error resistance:'
+    background-color: 'Background color:'
+    foreground-color: 'Foreground color:'
+    text: 'Text:'
+    placeholder: Your link or text...
+    button:
+      download: Download QR code
   wifi-qrcode-generator:
     title: WiFi QR Code generator
     description: Generate and download QR codes for quick connections to WiFi networks.

diff --git a/src/tools/qr-code-generator/qr-code-generator.vue b/src/tools/qr-code-generator/qr-code-generator.vue
@@ -3,6 +3,7 @@ import type { QRCodeErrorCorrectionLevel } from 'qrcode';
 import { useQRCode } from './useQRCode';
 import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
 
+const { t } = useI18n();
 const foreground = ref('#000000ff');
 const background = ref('#ffffffff');
 const errorCorrectionLevel = ref<QRCodeErrorCorrectionLevel>('medium');
@@ -32,23 +33,23 @@ const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-c
           label-position="left"
           label-width="130px"
           label-align="right"
-          label="Text:"
+          :label="t('tools.qrcode-generator.text')"
           multiline
           rows="1"
           autosize
-          placeholder="Your link or text..."
+          :placeholder="t('tools.qrcode-generator.placeholder')"
           mb-6
         />
         <n-form label-width="130" label-placement="left">
-          <n-form-item label="Foreground color:">
+          <n-form-item :label="t('tools.qrcode-generator.foreground-color')">
             <n-color-picker v-model:value="foreground" :modes="['hex']" />
           </n-form-item>
-          <n-form-item label="Background color:">
+          <n-form-item :label="t('tools.qrcode-generator.background-color')">
             <n-color-picker v-model:value="background" :modes="['hex']" />
           </n-form-item>
           <c-select
             v-model:value="errorCorrectionLevel"
-            label="Error resistance:"
+            :label="t('tools.qrcode-generator.error-resistance')"
             label-position="left"
             label-width="130px"
             label-align="right"
@@ -60,7 +61,7 @@ const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-c
         <div flex flex-col items-center gap-3>
           <n-image :src="qrcode" width="200" />
           <c-button @click="download">
-            Download qr-code
+            {{ t('tools.qrcode-generator.button.download') }}
           </c-button>
         </div>
       </n-gi>