feat: add items

2026-06-18 22:11:55 -03:00
parent 1fd36a39fd
commit 3b4817a8e1
7 changed files with 685 additions and 0 deletions
@@ -0,0 +1,65 @@
+'use client';
+
+import styles from '../styles/QuantityCard.module.css';
+import { randInRange } from '../app/items/types';
+
+type Props = {
+    id: string;
+    name: string;
+    iconUrl: string;
+    qty: number;
+    randMin: number;
+    randMax: number;
+    onSetQty: (id: string, qty: number) => void;
+};
+
+const clamp = (v: number) => Math.min(32767, Math.max(0, v));
+
+export default function QuantityCard({ id, name, iconUrl, qty, randMin, randMax, onSetQty }: Props) {
+    const active = qty > 0;
+
+    return (
+        <div className={`${styles.card} ${active ? styles.cardActive : ''}`}>
+            <img className={styles.icon} src={iconUrl} alt={name} loading="lazy" />
+            <span className={styles.name}>{name}</span>
+
+            {active ? (
+                <>
+                    <div className={styles.qtyRow}>
+                        <button className={styles.qtyBtn} onClick={() => onSetQty(id, clamp(qty - 1))}>−</button>
+                        <input
+                            className={styles.qtyInput}
+                            type="number"
+                            value={qty}
+                            min={0}
+                            max={5000}
+                            onChange={e => {
+                                const v = parseInt(e.target.value);
+                                if (!isNaN(v)) onSetQty(id, clamp(v));
+                            }}
+                        />
+                        <button className={styles.qtyBtn} onClick={() => onSetQty(id, clamp(qty + 1))}>+</button>
+                    </div>
+
+                    <div className={styles.quickRow}>
+                        <button className={styles.quickBtn} onClick={() => onSetQty(id, 100)}>100</button>
+                        <button
+                            className={`${styles.quickBtn} ${styles.quickBtnRand}`}
+                            onClick={() => onSetQty(id, randInRange(randMin, randMax))}
+                        >
+                            rand
+                        </button>
+                        <button
+                            className={`${styles.quickBtn} ${styles.quickBtnRemove}`}
+                            onClick={() => onSetQty(id, 0)}
+                        >
+                            ✕
+                        </button>
+                    </div>
+                </>
+            ) : (
+                <button className={styles.addBtn} onClick={() => onSetQty(id, 100)}>+ Add</button>
+            )}
+        </div>
+    );
+}