Initial commit

Load this up somewhere where I can setup CI/CD

src/app/(authenticated)/binner/page.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { useCallback, useContext, useEffect } from 'react';
+
+import { barcodeToProduct, generateRandomBarcode } from '../../lib/barcode';
+import { ProductInfo } from './components/ProductInfo/ProductInfo';
+import { Bins } from './components/Bins/Bins';
+import { DefectPanel } from './components/DefectPanel/DefectPanel';
+import { BinnerContext } from './context/BinnerContext';
+
+import styles from './page.module.scss';
+
+export default function Page() {
+    const { bin, item, setBin, setItem } = useContext(BinnerContext);
+
+    const handleKeydown = useCallback((event: KeyboardEvent) => {
+        switch (event.key) {
+            case ' ':
+                event.preventDefault();
+                console.log('Simulating barcode read');
+                const barcode = generateRandomBarcode();
+                setItem(barcodeToProduct(barcode));
+                break;
+            case 'Escape':
+                event.preventDefault();
+                console.log('Clearing bin selection');
+                setBin(null);
+                break;
+        }
+    }, [bin, item, setBin, setItem]);
+
+    useEffect(() => {
+        window.addEventListener('keydown', handleKeydown);
+        return () => {
+            window.removeEventListener('keydown', handleKeydown);
+        };
+    }, []);
+
+    return (
+        <main className={styles.page}>
+            <div className={styles.banner}>Use the spacebar to simulate a barcode read</div>
+            <ProductInfo />
+            <div className={styles.interactionPanel}>
+                {bin !== null 
+                    ? <DefectPanel />
+                    : <Bins />
+                }
+            </div>
+        </main>
+    );
+}