jeffemmett
/
rmaps-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add QR code to share modal for easy room sharing 

Replace the "QR Coming Soon" placeholder with a real QR code
(qrcode.react) encoding the room URL. Scan to join.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-02-18 09:56:47 +00:00
parent 4faab77278
commit 7aca62e9fa
2 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -16,6 +16,7 @@
"maplibre-gl": "^5.0.0", "maplibre-gl": "^5.0.0",
"nanoid": "^5.0.9", "nanoid": "^5.0.9",
"next": "^14.2.28", "next": "^14.2.28",
"qrcode.react": "^4.2.0",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"zustand": "^5.0.2" "zustand": "^5.0.2"

13
src/components/room/ShareModal.tsx
View File

@ -1,6 +1,7 @@
'use client'; 'use client';
import { useState } from 'react'; import { useState } from 'react';
import { QRCodeSVG } from 'qrcode.react';
interface ShareModalProps { interface ShareModalProps {
roomSlug: string; roomSlug: string;
@ -99,11 +100,17 @@ export default function ShareModal({ roomSlug, onClose }: ShareModalProps) {
</button> </button>
</div> </div>
{/* QR Code placeholder */} {/* QR Code */}
<div className="mt-6 pt-6 border-t border-white/10 text-center"> <div className="mt-6 pt-6 border-t border-white/10 text-center">
<div className="text-xs text-white/40 mb-2">Or scan QR code</div> <div className="text-xs text-white/40 mb-2">Or scan QR code</div>
<div className="w-32 h-32 mx-auto bg-white rounded-lg flex items-center justify-center"> <div className="w-36 h-36 mx-auto bg-white rounded-lg p-2">
<span className="text-rmaps-dark text-xs">QR Coming Soon</span> <QRCodeSVG
value={shareUrl}
size={128}
bgColor="#ffffff"
fgColor="#0f172a"
level="M"
/>
</div> </div>
</div> </div>
</div> </div>