added Contact Info QR Code generator

src/tools/qr-contact-info-generator/qr-contact-info-generator.vue

@@ -1,77 +1,61 @@
-<template>
-  <div>
-    <h1>Contact QR Code Generator</h1>
-    <form @submit.prevent="generateQRCode">
-      <input v-model="contact.firstName" placeholder="First Name" required />
-      <input v-model="contact.lastName" placeholder="Last Name" required />
-      <input v-model="contact.jobRole" placeholder="Job Role" required />
-      <input v-model="contact.phoneNumber" placeholder="Phone Number" required />
-      <input v-model="contact.emailAddress" placeholder="Email Address" required />
-      <input v-model="contact.companyName" placeholder="Company Name" required />
-      <input v-model="contact.companyWebsite" placeholder="Company Website" required />
-      <input v-model="contact.companyAddress" placeholder="Company Address" required />
-      <input v-model="foregroundColor" placeholder="Foreground Color" />
-      <input v-model="backgroundColor" placeholder="Background Color" />
-      <button type="submit">Generate QR Code</button>
-    </form>
-    <div v-if="qrCodeDataUrl">
-      <img :src="qrCodeDataUrl" alt="Contact QR Code" />
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+import { useContactQRCode } from "./useContactQRCode";
+import { useDownloadFileFromBase64 } from "@/composable/downloadBase64";
 
-<script lang="ts">
-import { defineComponent, ref } from 'vue';
-import { generateContactQRCode } from './qr-contact-info-generator';
+const fullName = ref("");
+const jobRole = ref("");
+const phoneNumber = ref("");
+const email = ref("");
+const website = ref("");
+const address = ref("");
 
-export default defineComponent({
-  name: 'ContactQRCodeGenerator',
-  setup() {
-    const contact = ref({
-      firstName: '',
-      lastName: '',
-      jobRole: '',
-      phoneNumber: '',
-      emailAddress: '',
-      companyName: '',
-      companyWebsite: '',
-      companyAddress: ''
-    });
-    const foregroundColor = ref('#000000ff');
-    const backgroundColor = ref('#ffffffff');
-    const qrCodeDataUrl = ref<string | null>(null);
+const foreground = ref("#000000ff");
+const background = ref("#ffffffff");
 
-    const generateQRCode = async () => {
-      qrCodeDataUrl.value = await generateContactQRCode(contact.value, {
-        foregroundColor: foregroundColor.value,
-        backgroundColor: backgroundColor.value
-      });
-    };
+const { qrcode } = useContactQRCode({
+  fullName,
+  jobRole,
+  phoneNumber,
+  email,
+  website,
+  address,
+  color: { foreground, background },
+  options: { width: 1024 },
+});
 
-    return {
-      contact,
-      foregroundColor,
-      backgroundColor,
-      qrCodeDataUrl,
-      generateQRCode
-    };
-  }
+const { download } = useDownloadFileFromBase64({
+  source: qrcode,
+  filename: "contact-info-qr.png",
 });
 </script>
 
-<style scoped>
-form {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
+<template>
+  <c-card>
+    <div grid grid-cols-1 gap-12>
+      <div>
+        <c-input-text v-model:value="fullName" label="Full Name" placeholder="John Doe" mb-4 />
+        <c-input-text v-model:value="jobRole" label="Job Role" placeholder="Software Engineer" mb-4 />
+        <c-input-text v-model:value="phoneNumber" label="Phone Number" placeholder="+1 234 567 8901" mb-4 />
+        <c-input-text v-model:value="email" label="Email Address" placeholder="john.doe@example.com" mb-4 />
+        <c-input-text v-model:value="website" label="Website" placeholder="https://acme.com" mb-4 />
+        <c-input-text v-model:value="address" label="Company Address" placeholder="123 Main St, City" mb-4 />
 
-button {
-  margin-top: 10px;
-}
+        <n-form label-width="130" label-placement="left">
+          <n-form-item label="Foreground color:">
+            <n-color-picker v-model:value="foreground" :modes="['hex']" />
+          </n-form-item>
+          <n-form-item label="Background color:">
+            <n-color-picker v-model:value="background" :modes="['hex']" />
+          </n-form-item>
+        </n-form>
+      </div>
 
-img {
-  margin-top: 20px;
-  max-width: 100%;
-}
-</style>
+      <div v-if="qrcode">
+        <div flex flex-col items-center gap-3>
+          <img alt="contact-info-qrcode" :src="qrcode" width="200" />
+          <c-button @click="download">Download QR Code</c-button>
+        </div>
+      </div>
+    </div>
+  </c-card>
+</template>