import styles from './hotbar.module.css';
import Slot from './slot.jsx';
/**
* The hotbar. 10 slots of inventory with an active selection.
*/
export default function Hotbar({active, onActivate, slots}) {
const Slots = slots.map((slot, i) => (
{
onActivate(i)
event.stopPropagation();
}}
onMouseUp={(event) => {
event.stopPropagation();
}}
onDragOver={(event) => {
event.preventDefault();
}}
onDragStart={(event) => {
if (!slot) {
event.preventDefault();
}
event.dataTransfer.setData('silphius/item', i);
onActivate(i);
}}
onDrop={(event) => {
event.preventDefault();
onActivate(i);
}}
qty={slot?.qty}
/>
));
return (
{Slots}
);
}