| 1 | import { encode } from "uqr"; |
| 2 | |
| 3 | /** |
| 4 | * A QR code drawn as one SVG path, dark on white in either theme so any |
| 5 | * phone's camera reads it. `label` names what it holds for screen readers. |
| 6 | */ |
| 7 | export function QrCode({ value, label, size = 184 }: { value: string; label: string; size?: number }) { |
| 8 | const { data, size: modules } = encode(value, { ecc: "M", border: 2 }); |
| 9 | let path = ""; |
| 10 | data.forEach((row, y) => { |
| 11 | row.forEach((dark, x) => { |
| 12 | if (dark) path += `M${x} ${y}h1v1h-1z`; |
| 13 | }); |
| 14 | }); |
| 15 | return ( |
| 16 | <svg role="img" aria-label={label} viewBox={`0 0 ${modules} ${modules}`} width={size} height={size} shapeRendering="crispEdges" className="rounded-md"> |
| 17 | <rect width={modules} height={modules} fill="#ffffff" /> |
| 18 | <path d={path} fill="#000000" /> |
| 19 | </svg> |
| 20 | ); |
| 21 | } |