Merge pull request #595 from imbavirus/feature/wireguard-qrcode

Added QR code to wireguard config for easy scanning on mobile phones

src/app/[orgId]/settings/sites/create/page.tsx

@@ -57,6 +57,8 @@ import {
     BreadcrumbSeparator
 } from "@app/components/ui/breadcrumb";
 import Link from "next/link";
+import { QRCodeCanvas } from "qrcode.react";
+import QRContainer from "@app/components/QRContainer";
 
 const createSiteFormSchema = z
     .object({
@@ -775,8 +777,16 @@ PersistentKeepalive = 5`;
                                     </SettingsSectionDescription>
                                 </SettingsSectionHeader>
                                 <SettingsSectionBody>
+                                    <div className="flex items-center gap-4">
                                         <CopyTextBox text={wgConfig} />
-
+                                        <QRContainer>
+                                            <QRCodeCanvas
+                                                value={wgConfig}
+                                                size={168}
+                                                className="mx-auto"
+                                            />
+                                        </QRContainer>
+                                    </div>
                                     <Alert variant="neutral">
                                         <InfoIcon className="h-4 w-4" />
                                         <AlertTitle className="font-semibold">

src/components/QRContainer.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+export default function QRContainer({
+    children = <div/>,
+    outline = true
+}) {
+
+    return (
+        <div
+            className={`relative w-fit border-2 rounded-md`}
+        >
+            <div className="bg-white p-6 rounded-md">
+                {children}
+            </div>
+        </div>
+    );
+}