Initial commit

Load this up somewhere where I can setup CI/CD

src/app/(authenticated)/binner/components/Bins/Bins.module.scss

@@ -0,0 +1,69 @@
+.bins {
+    display: flex;
+    flex: 1 0 100%;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1rem;
+
+    .pdsBinWrap {
+        display: flex;
+        flex: 0 0 50%;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+        align-items: center;
+        gap: 1rem;
+        
+        .bin {
+            align-self: stretch;
+            display: flex;
+            flex: 1 1 33%;
+
+            button {
+                font-size: 1.3em;
+                flex: 0 0 100%;
+            }
+        }
+    }
+
+    .lossBinWrap {
+        display: flex;
+        flex: 0 0 50%;
+
+        button {
+            font-size: 1.3em;
+            flex: 0 0 100%;
+        }
+    }
+}
+
+.iconBottom, .iconLeft, .iconRight, .iconTop {
+    button {
+        align-items: center;
+        display: flex;
+        gap: 1em;
+        justify-content: center;
+    }
+}
+
+.iconBottom, .iconTop {
+    button {
+        flex-direction: column;
+    }
+}
+
+.iconLeft, .iconRight {
+    button {
+        flex-direction: row;
+    }
+}
+
+.iconRight, .iconBottom {
+    strong {
+        order: 1;
+    }
+
+    span {
+        order: 2
+    }
+}

src/app/(authenticated)/binner/components/Bins/Bins.tsx

@@ -0,0 +1,60 @@
+import clsx from 'clsx';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowDown, faArrowLeft, faArrowRight, faArrowUp } from '@fortawesome/free-solid-svg-icons'
+
+import { Bin } from '../../../../lib/bin.enum';
+import { BinButton } from '../BinButton/BinButton';
+
+import { useCallback, useContext, useEffect } from 'react';
+import { BinnerContext } from '../../context/BinnerContext';
+
+import styles from './Bins.module.scss';
+
+export function Bins() {
+    const { bin, item, setBin, setItem } = useContext(BinnerContext);
+
+    const handleKeydown = useCallback((event: KeyboardEvent) => {
+        console.log('Bins Keydown!');
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                console.log('Loss!');
+                setBin(Bin.LOSS);
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                console.log('Process!');
+                setBin(Bin.PROCESS);
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                console.log('Shoulder Tap!');
+                setBin(Bin.SHOULDER_TAP);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                console.log('Donate!');
+                setBin(Bin.DONATE);
+                break;
+        }
+    }, [bin, item, setBin, setItem]);
+
+    useEffect(() => {
+        window.addEventListener('keydown', handleKeydown);
+        return () => {
+            window.removeEventListener('keydown', handleKeydown);
+        };
+    }, []);
+    
+    return (
+        <div className={styles.bins}>
+            <div className={styles.pdsBinWrap}>
+                <BinButton className={clsx(styles.bin, styles.pBin, styles.iconLeft)} bin={Bin.PROCESS} icon={<FontAwesomeIcon icon={faArrowLeft} />} />
+                <BinButton className={clsx(styles.bin, styles.dBin, styles.iconTop)} bin={Bin.DONATE} icon={<FontAwesomeIcon icon={faArrowUp} />} />
+                <BinButton className={clsx(styles.bin, styles.sBin, styles.iconRight)} bin={Bin.SHOULDER_TAP} icon={<FontAwesomeIcon icon={faArrowRight} />} />
+            </div>
+            <BinButton className={clsx(styles.lossBinWrap, styles.lBin, styles.iconBottom)} bin={Bin.LOSS} icon={<FontAwesomeIcon icon={faArrowDown} />} />
+        </div>
+    );
+}