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:
parent
4faab77278
commit
7aca62e9fa
|
|
@ -16,6 +16,7 @@
|
|||
"maplibre-gl": "^5.0.0",
|
||||
"nanoid": "^5.0.9",
|
||||
"next": "^14.2.28",
|
||||
"qrcode.react": "^4.2.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"zustand": "^5.0.2"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { QRCodeSVG } from 'qrcode.react';
|
||||
|
||||
interface ShareModalProps {
|
||||
roomSlug: string;
|
||||
|
|
@ -99,11 +100,17 @@ export default function ShareModal({ roomSlug, onClose }: ShareModalProps) {
|
|||
</button>
|
||||
</div>
|
||||
|
||||
{/* QR Code placeholder */}
|
||||
{/* QR Code */}
|
||||
<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="w-32 h-32 mx-auto bg-white rounded-lg flex items-center justify-center">
|
||||
<span className="text-rmaps-dark text-xs">QR Coming Soon</span>
|
||||
<div className="w-36 h-36 mx-auto bg-white rounded-lg p-2">
|
||||
<QRCodeSVG
|
||||
value={shareUrl}
|
||||
size={128}
|
||||
bgColor="#ffffff"
|
||||
fgColor="#0f172a"
|
||||
level="M"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue