silphius/app/react/components/dom/hotbar.jsx

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,
  hotbarIsHidden,
  onActivate,
  slots,
}) {
  const Slots = slots.map((slot, i) => (
    <div
      className={
        [styles.slotWrapper, active === i && styles.active]
          .filter(Boolean).join(' ')
      }
      key={i}
    >
      <Slot
        icon={slot?.icon}
        onMouseDown={(event) => {
          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}
      />
    </div>
  ));
  return (
    <div
      className={styles.hotbar}
      style={hotbarIsHidden ? {top: '-50px'} : {transition: 'none'}}
    >
      <p className={styles.label}>{slots[active] && slots[active].label}</p>
      {Slots}
    </div>
  );
}