jayjennings
3e964d1176
feat(kiosk): implement kiosk report submission functionality with offline support test(outbox): add tests for outbox functionality including report submission and error handling feat(outbox): create outbox management for queued reports with IndexedDB persistence feat(uuid): add UUID generation utility for client IDs feat(qr): implement QR code generation for reporting links by site and area feat(kiosk): create Kiosk page for reporting incidents without an account
20 lines
915 B
TypeScript
20 lines
915 B
TypeScript
import QRCode from 'qrcode'
|
|
import { useMemo } from 'react'
|
|
|
|
/** QR code as crisp SVG squares (prints sharply at any size). */
|
|
export function QrCode({ value, size = 160, label }: { value: string; size?: number; label: string }) {
|
|
const { path, count } = useMemo(() => {
|
|
const { modules } = QRCode.create(value, { errorCorrectionLevel: 'M' })
|
|
let d = ''
|
|
for (let y = 0; y < modules.size; y++) for (let x = 0; x < modules.size; x++) if (modules.get(x, y)) d += `M${x} ${y}h1v1h-1z`
|
|
return { path: d, count: modules.size }
|
|
}, [value])
|
|
const margin = 2
|
|
return (
|
|
<svg width={size} height={size} viewBox={`${-margin} ${-margin} ${count + margin * 2} ${count + margin * 2}`} role="img" aria-label={label} shapeRendering="crispEdges">
|
|
<rect x={-margin} y={-margin} width={count + margin * 2} height={count + margin * 2} fill="#fff" />
|
|
<path d={path} fill="#000" />
|
|
</svg>
|
|
)
|
|
}
|