g1t/apps/web/app/components/qr-code.tsx
| 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 |
| 17 | role="img" |
| 18 | aria-label={label} |
| 19 | viewBox={`0 0 ${modules} ${modules}`} |
| 20 | width={size} |
| 21 | height={size} |
| 22 | shapeRendering="crispEdges" |
| 23 | className="rounded-md" |
| 24 | > |
| 25 | <rect width={modules} height={modules} fill="#ffffff" /> |
| 26 | <path d={path} fill="#000000" /> |
| 27 | </svg> |
| 28 | ); |
| 29 | } |