wire up barcode scanning with zxing

scanner modal, product preview, verified catalog with 12 red bull barcodes,
appwrite-backed user mappings, lookup pipeline with known/user/partial/unknown result
This commit is contained in:
Ned Halksworth
2026-05-27 17:30:48 +01:00
committed by Ned
parent cb375adbd6
commit ea8b10a81f
+4 -4
View File
@@ -301,7 +301,7 @@ export function BarcodeScannerModal({
<AnimatePresence> <AnimatePresence>
{open && ( {open && (
<motion.div <motion.div
className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-3 backdrop-blur-xl sm:p-4" className="modal-backdrop fixed inset-0 z-50 flex justify-center bg-black/70 backdrop-blur-xl"
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
@@ -318,11 +318,11 @@ export function BarcodeScannerModal({
> >
<div className="mb-5 flex items-start justify-between gap-4"> <div className="mb-5 flex items-start justify-between gap-4">
<div> <div>
<p className="text-sm font-medium uppercase tracking-[0.18em] text-cyan-100">Camera scan</p> <p className="section-kicker">Camera scan</p>
<h2 id="barcode-scanner-title" className="mt-1 text-3xl font-semibold tracking-tight text-white"> <h2 id="barcode-scanner-title" className="app-card-title mt-1 text-3xl">
Scan barcode Scan barcode
</h2> </h2>
<p className="mt-2 text-sm text-slate-300">Point your camera at the barcode on the can.</p> <p className="app-card-subtitle mt-2">Point your camera at the barcode on the can.</p>
</div> </div>
<button ref={closeButtonRef} className="icon-button" type="button" onClick={onClose} aria-label="Close barcode scanner"> <button ref={closeButtonRef} className="icon-button" type="button" onClick={onClose} aria-label="Close barcode scanner">
<X size={18} aria-hidden="true" /> <X size={18} aria-hidden="true" />