mirror of
https://github.com/xtr-dev/rondevu-demo.git
synced 2025-12-13 03:53:22 +00:00
Bas van den Aakster
9f9068e7c7
Components created: - Header: App header with GitHub links - ActionSelector: Step 1 - Choose create/join/scan - MethodSelector: Step 2 - Choose connection method - ConnectionForm: Step 3 - Enter connection details - ChatView: Step 4 - Connected chat interface - Message: Individual message display (text/file) - QRScanner: QR code scanning component - QRCodeDisplay: QR code display component - FileUploadProgress: Progress bar for file uploads Features: - Clean component separation with props - File upload progress bar with percentage - Cancel upload functionality - Disabled file button during upload - Visual progress indicator with gradient - All logic remains in App.jsx for state management
14 lines
374 B
JavaScript
14 lines
374 B
JavaScript
function QRCodeDisplay({ qrCodeUrl, connectionId }) {
|
|
if (!qrCodeUrl) return null;
|
|
|
|
return (
|
|
<div className="qr-code-container">
|
|
<p className="qr-label">Scan to connect:</p>
|
|
<img src={qrCodeUrl} alt="Connection QR Code" className="qr-code" />
|
|
<p className="connection-id-display">{connectionId}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default QRCodeDisplay;
|