1 files changed, 88 insertions, 0 deletions
diff --git a/src/components/VCardExport.tsx b/src/components/VCardExport.tsx
new file mode 100644
index 0000000..82afa59
--- /dev/null
+++ b/src/components/VCardExport.tsx
@@ -0,0 +1,88 @@
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  CardFooter,
+} from "@/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useEffect, useRef, useState } from "react";
+import QRCode from "qrcode";
+
+interface VCardExportProps {
+  sectionChange: (section: string) => void;
+  vcardText: any;
+}
+
+export default function VCardExport({
+  sectionChange,
+  vcardText,
+}: VCardExportProps) {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const [resolution, setResolution] = useState<string>("512");
+
+  useEffect(() => {
+    if (canvasRef.current) {
+      QRCode.toCanvas(canvasRef.current, vcardText, {
+        width: 256,
+        margin: 2,
+      }).catch(console.error);
+    }
+  }, [vcardText]);
+
+  const downloadQRCode = () => {
+    const offscreenCanvas = document.createElement("canvas");
+    QRCode.toCanvas(offscreenCanvas, vcardText, {
+      width: Number(resolution),
+      margin: 2,
+    })
+      .then(() => {
+        const pngUrl = offscreenCanvas.toDataURL("image/png");
+        const link = document.createElement("a");
+        link.href = pngUrl;
+        link.download = "vcard_qrcode.png";
+        link.click();
+      })
+      .catch(console.error);
+  };
+
+  return (
+    <Card className="w-[600px] mx-5">
+      <CardHeader>
+        <CardTitle>VCard Qrcode</CardTitle>
+        <CardDescription>
+          Sie können nun die Größe (Standard = 512x512px) auswählen und den
+          QRCode downloaden.
+        </CardDescription>
+      </CardHeader>
+      <CardFooter className="flex justify-between">
+        <Button onClick={() => sectionChange("form")}>Zurück</Button>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline">Größe anpassen</Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-56">
+            <DropdownMenuRadioGroup
+              value={resolution}
+              onValueChange={setResolution}
+            >
+              <DropdownMenuRadioItem value="1024">
+                1024x1024
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="512">512x512</DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="256">256x256</DropdownMenuRadioItem>
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>{" "}
+        <Button onClick={downloadQRCode}>Download</Button>
+      </CardFooter>
+    </Card>
+  );
+}