| 1 | import { useMemo } from 'react'; |
| 2 | import { renderSVG } from 'uqr'; |
| 3 | |
| 4 | /** |
| 5 | * The QR that hands a seat to a phone. Just the code — where it sits and which |
| 6 | * way it faces is its seat's business, and it reads at any angle anyway. |
| 7 | */ |
| 8 | export function SeatQr({ url }: { url: string }) { |
| 9 | // Transparent ground, dark-green ink: the code is engraved into whatever |
| 10 | // face the CSS gives the div, the way a dragon tile is cut. |
| 11 | const svg = useMemo( |
| 12 | () => renderSVG(url, { border: 1, whiteColor: 'transparent', blackColor: '#14402f' }), |
| 13 | [url], |
| 14 | ); |
| 15 | return <div className="seat-qr" dangerouslySetInnerHTML={{ __html: svg }} />; |
| 16 | } |