From 6aeddde1cdd0c90a6c2a37c5a870a9b0f5f4e2fc Mon Sep 17 00:00:00 2001
From: Justin van der Westhuizen <justin@giftsinc.co.za>
Date: Fri, 25 Apr 2025 07:06:14 +0200
Subject: [PATCH] Added QR code to wireguard config for easy scanning on mobile
 phones

---
 src/app/[orgId]/settings/sites/create/page.tsx | 14 ++++++++++++--
 src/components/QRContainer.tsx                 | 17 +++++++++++++++++
 2 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 src/components/QRContainer.tsx

diff --git a/src/app/[orgId]/settings/sites/create/page.tsx b/src/app/[orgId]/settings/sites/create/page.tsx
index f078b9d7..ba46aa59 100644
--- a/src/app/[orgId]/settings/sites/create/page.tsx
+++ b/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 QRCode from "react-qr-code";
+import QRContainer from "@app/components/QRContainer";
 
 const createSiteFormSchema = z
     .object({
@@ -775,8 +777,16 @@ PersistentKeepalive = 5`;
                                     </SettingsSectionDescription>
                                 </SettingsSectionHeader>
                                 <SettingsSectionBody>
-                                    <CopyTextBox text={wgConfig} />
-
+                                    <div className="flex items-center gap-4">
+                                        <CopyTextBox text={wgConfig} />
+                                        <QRContainer>
+                                            <QRCode
+                                                value={wgConfig}
+                                                size={168}
+                                                className="mx-auto"
+                                            />
+                                        </QRContainer>
+                                    </div>
                                     <Alert variant="neutral">
                                         <InfoIcon className="h-4 w-4" />
                                         <AlertTitle className="font-semibold">
diff --git a/src/components/QRContainer.tsx b/src/components/QRContainer.tsx
new file mode 100644
index 00000000..65912dba
--- /dev/null
+++ b/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>
+    );
+}