style: run format:apply
This commit is contained in:
+105
-95
@@ -15,110 +15,120 @@ import AddonGrid from './AddonGrid';
|
||||
type Tab = 'items' | 'offerings' | 'addons';
|
||||
|
||||
export default function ItemsPage() {
|
||||
const store = useInventoryStore();
|
||||
const store = useInventoryStore();
|
||||
|
||||
const [tab, setTab] = useState<Tab>('items');
|
||||
const [items, setItems] = useState<Item[]>([]);
|
||||
const [offerings, setOfferings] = useState<Offering[]>([]);
|
||||
const [addons, setAddons] = useState<Addon[]>([]);
|
||||
const [tab, setTab] = useState<Tab>('items');
|
||||
const [items, setItems] = useState<Item[]>([]);
|
||||
const [offerings, setOfferings] = useState<Offering[]>([]);
|
||||
const [addons, setAddons] = useState<Addon[]>([]);
|
||||
|
||||
const [randMin, setRandMin] = useState(50);
|
||||
const [randMax, setRandMax] = useState(200);
|
||||
const [randMin, setRandMin] = useState(50);
|
||||
const [randMax, setRandMax] = useState(200);
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all([fetchItems(), fetchOfferings(), fetchAddons()])
|
||||
.then(([i, o, a]) => {
|
||||
setItems(i);
|
||||
setOfferings(o);
|
||||
setAddons(a);
|
||||
});
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
Promise.all([fetchItems(), fetchOfferings(), fetchAddons()]).then(
|
||||
([i, o, a]) => {
|
||||
setItems(i);
|
||||
setOfferings(o);
|
||||
setAddons(a);
|
||||
}
|
||||
);
|
||||
}, []);
|
||||
|
||||
const handleClearAll = () => {
|
||||
store.clearCategory('items');
|
||||
store.clearCategory('offerings');
|
||||
store.clearCategory('addons');
|
||||
};
|
||||
const handleClearAll = () => {
|
||||
store.clearCategory('items');
|
||||
store.clearCategory('offerings');
|
||||
store.clearCategory('addons');
|
||||
};
|
||||
|
||||
const activeItems = Object.values(store.items).filter(q => q > 0).length;
|
||||
const activeOfferings = Object.values(store.offerings).filter(q => q > 0).length;
|
||||
const activeAddons = Object.values(store.addons).filter(q => q > 0).length;
|
||||
const activeItems = Object.values(store.items).filter((q) => q > 0).length;
|
||||
const activeOfferings = Object.values(store.offerings).filter(
|
||||
(q) => q > 0
|
||||
).length;
|
||||
const activeAddons = Object.values(store.addons).filter((q) => q > 0).length;
|
||||
|
||||
return (
|
||||
<div className={shared.container}>
|
||||
<header className={shared.header}>
|
||||
<div>
|
||||
<h1 className={shared.title}>Items & Offerings</h1>
|
||||
<p className={shared.subtitle}>
|
||||
{activeItems} items · {activeOfferings} offerings · {activeAddons} addons
|
||||
</p>
|
||||
</div>
|
||||
return (
|
||||
<div className={shared.container}>
|
||||
<header className={shared.header}>
|
||||
<div>
|
||||
<h1 className={shared.title}>Items & Offerings</h1>
|
||||
<p className={shared.subtitle}>
|
||||
{activeItems} items · {activeOfferings} offerings · {activeAddons}{' '}
|
||||
addons
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.rangeGroup}>
|
||||
<span className={styles.rangeLabel}>Rand range</span>
|
||||
<input
|
||||
className={styles.rangeInput}
|
||||
type="number"
|
||||
value={randMin}
|
||||
min={0}
|
||||
max={5000}
|
||||
onChange={e => setRandMin(Math.max(0, parseInt(e.target.value) || 0))}
|
||||
/>
|
||||
<span className={styles.rangeSep}>–</span>
|
||||
<input
|
||||
className={styles.rangeInput}
|
||||
type="number"
|
||||
value={randMax}
|
||||
min={0}
|
||||
max={5000}
|
||||
onChange={e => setRandMax(Math.min(5000, parseInt(e.target.value) || 0))}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.rangeGroup}>
|
||||
<span className={styles.rangeLabel}>Rand range</span>
|
||||
<input
|
||||
className={styles.rangeInput}
|
||||
type='number'
|
||||
value={randMin}
|
||||
min={0}
|
||||
max={5000}
|
||||
onChange={(e) =>
|
||||
setRandMin(Math.max(0, parseInt(e.target.value) || 0))
|
||||
}
|
||||
/>
|
||||
<span className={styles.rangeSep}>–</span>
|
||||
<input
|
||||
className={styles.rangeInput}
|
||||
type='number'
|
||||
value={randMax}
|
||||
min={0}
|
||||
max={5000}
|
||||
onChange={(e) =>
|
||||
setRandMax(Math.min(5000, parseInt(e.target.value) || 0))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button className={shared.clearBtn} onClick={handleClearAll}>Clear All</button>
|
||||
</header>
|
||||
<button className={shared.clearBtn} onClick={handleClearAll}>
|
||||
Clear All
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div className={styles.tabs}>
|
||||
{(['items', 'offerings', 'addons'] as Tab[]).map(t => (
|
||||
<button
|
||||
key={t}
|
||||
className={`${styles.tab} ${tab === t ? styles.tabActive : ''}`}
|
||||
onClick={() => setTab(t)}
|
||||
>
|
||||
{t}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className={styles.tabs}>
|
||||
{(['items', 'offerings', 'addons'] as Tab[]).map((t) => (
|
||||
<button
|
||||
key={t}
|
||||
className={`${styles.tab} ${tab === t ? styles.tabActive : ''}`}
|
||||
onClick={() => setTab(t)}
|
||||
>
|
||||
{t}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{tab === 'items' && (
|
||||
<ItemGrid
|
||||
items={items}
|
||||
quantities={store.items}
|
||||
randMin={randMin}
|
||||
randMax={randMax}
|
||||
onSetQty={store.setItemQuantity}
|
||||
/>
|
||||
)}
|
||||
{tab === 'items' && (
|
||||
<ItemGrid
|
||||
items={items}
|
||||
quantities={store.items}
|
||||
randMin={randMin}
|
||||
randMax={randMax}
|
||||
onSetQty={store.setItemQuantity}
|
||||
/>
|
||||
)}
|
||||
|
||||
{tab === 'offerings' && (
|
||||
<OfferingGrid
|
||||
offerings={offerings}
|
||||
quantities={store.offerings}
|
||||
randMin={randMin}
|
||||
randMax={randMax}
|
||||
onSetQty={store.setOfferingQuantity}
|
||||
/>
|
||||
)}
|
||||
{tab === 'offerings' && (
|
||||
<OfferingGrid
|
||||
offerings={offerings}
|
||||
quantities={store.offerings}
|
||||
randMin={randMin}
|
||||
randMax={randMax}
|
||||
onSetQty={store.setOfferingQuantity}
|
||||
/>
|
||||
)}
|
||||
|
||||
{tab === 'addons' && (
|
||||
<AddonGrid
|
||||
addons={addons}
|
||||
quantities={store.addons}
|
||||
randMin={randMin}
|
||||
randMax={randMax}
|
||||
onSetQty={store.setAddonQuantity}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
{tab === 'addons' && (
|
||||
<AddonGrid
|
||||
addons={addons}
|
||||
quantities={store.addons}
|
||||
randMin={randMin}
|
||||
randMax={randMax}
|
||||
onSetQty={store.setAddonQuantity}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user