reorganize code into smaller files & dirs

packages/app/src/Components/QrCode.tsx

@@ -0,0 +1,50 @@
+import QRCodeStyling from "qr-code-styling";
+import { useEffect, useRef } from "react";
+
+export interface QrCodeProps {
+  data?: string;
+  link?: string;
+  avatar?: string;
+  height?: number;
+  width?: number;
+  className?: string;
+}
+
+export default function QrCode(props: QrCodeProps) {
+  const qrRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if ((props.data?.length ?? 0) > 0 && qrRef.current) {
+      const qr = new QRCodeStyling({
+        width: props.width || 256,
+        height: props.height || 256,
+        data: props.data,
+        margin: 5,
+        type: "canvas",
+        image: props.avatar,
+        dotsOptions: {
+          type: "rounded",
+        },
+        cornersSquareOptions: {
+          type: "extra-rounded",
+        },
+        imageOptions: {
+          crossOrigin: "anonymous",
+        },
+      });
+      qrRef.current.innerHTML = "";
+      qr.append(qrRef.current);
+      if (props.link) {
+        qrRef.current.onclick = function () {
+          const elm = document.createElement("a");
+          elm.href = props.link ?? "";
+          elm.click();
+        };
+      }
+    } else if (qrRef.current) {
+      qrRef.current.innerHTML = "";
+    }
+  }, [props.data, props.link]);
+
+  return <div className={`qr${props.className ?? ""}`} ref={qrRef}></div>;
+}