Add QR code feature

package.json

@@ -28,6 +28,7 @@
     "mongoose": "^8.14.2",
     "next": "15.3.2",
     "next-auth": "^4.24.11",
+    "next-qrcode": "^2.5.1",
     "pdfmake": "^0.2.20",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

src/components/ui/Popup.tsx

@@ -4,6 +4,7 @@ import React, { useState, useEffect } from 'react';
 import { BasicToggleButton, GoogleLoginButton, ZButton } from './Buttons';
 import CompoundTable from './CompoundTable';
 import LoadingPopup from './LoadingPopup';
+import QRCode from './QRCode';
 
 type dataProps = {
   code: string;
@@ -68,7 +69,7 @@ const typeTextMap = {
   login: 'Please log-in to save and share your time-tables.',
   rem_course: 'Are you sure you want to remove this course?',
   rem_allcourse: 'Are you sure you want to remove all courses?',
-  share_tt: 'Share your timetable with anyone.',
+  share_tt: 'Scan QR or copy the link to share.',
   save_tt: 'Save this timetable in your collection.',
   delete_tt: 'Are you sure you want to delete this timetable?',
   view_tt: '',
@@ -249,17 +250,20 @@ export default function Popup({
               <div className="break-words w-full text-center mt-2 mb-4">{text}</div>
 
               {shareState === 'on' && (
-                <div className="flex flex-row items-center justify-center gap-8 mt-2 mb-4">
-                  <div className="border-3 border-black pt-2 pb-2 px-4 rounded-xl shadow-[4px_4px_0_0_black] bg-white text-[#606060] font-semibold">
-                    {dataBody}
+                <div className="flex flex-col items-center justify-center gap-6 mt-2 mb-4">
+                  <QRCode url={dataBody || ''} />
+                  <div className="flex flex-row items-center justify-center gap-8">
+                    <div className="border-3 border-black pt-2 pb-2 px-4 rounded-xl shadow-[4px_4px_0_0_black] bg-white text-[#606060] font-semibold">
+                      {dataBody}
+                    </div>
+                    <ZButton
+                      type="regular"
+                      text="Copy"
+                      color="blue"
+                      forceColor={theme[1]}
+                      onClick={() => copy(dataBody || '')}
+                    />
                   </div>
-                  <ZButton
-                    type="regular"
-                    text="Copy"
-                    color="blue"
-                    forceColor={theme[1]}
-                    onClick={() => copy(dataBody || '')}
-                  />
                 </div>
               )}
             </div>

src/components/ui/PopupMobile.tsx

@@ -5,6 +5,7 @@ import Image from 'next/image';
 import CompoundTable from './CompoundTable';
 import Footer from './Footer';
 import { GoogleLoginButton, BasicToggleButton, ZButton } from './Buttons';
+import QRCode from './QRCode';
 
 type dataProps = {
   code: string;
@@ -162,12 +163,16 @@ export function PopupViewTT({
 
         <div className="text-2xl mt-4 mb-2 text-black font-semibold font-poppins">{TTName}</div>
 
-        <div className="text-center text-sm mb-2 text-gray-700 px-4 break-words">
-          Shareable Link: <span className="underline">{shareLink}</span>
-        </div>
+        <div className="flex flex-col items-center justify-center gap-4 mb-4">
+          {shareEnabledDefault && <QRCode url={shareLink} />}
+
+          <div className="text-center text-sm text-gray-700 px-4 break-words">
+            Shareable Link: <span className="underline">{shareLink}</span>
+          </div>
 
-        <div className="text-center text-sm mb-4 text-gray-600 px-4">
-          {shareEnabledDefault ? 'Publicly Shareable' : 'Private'}
+          <div className="text-center text-sm text-gray-600 px-4">
+            {shareEnabledDefault ? 'Publicly Shareable' : 'Private'}
+          </div>
         </div>
 
         <div className="flex flex-col items-center justify-center gap-4 mb-4">

src/components/ui/QRCode.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useQRCode } from "next-qrcode";
+
+interface QRCodeProps {
+  url: string;
+}
+
+export default function QRCode({ url }: QRCodeProps) {
+  const { Canvas } = useQRCode();
+
+  return (
+    <div className="inline-flex items-center justify-center p-3 bg-white border-3 border-black rounded-xl shadow-[4px_4px_0_0_black]">
+      <Canvas
+        text={url}
+        options={{
+          errorCorrectionLevel: "M",
+          margin: 3,
+          scale: 4,
+          width: 200,
+          color: {
+            dark: "#000000",
+            light: "#FFFFFF",
+          },
+        }}
+      />
+    </div>
+  );
+}