silphius/app/react-components/slot.jsx

import styles from './slot.module.css';

/**
 * An inventory slot. Displays an item image and the quantity of the item if > 1.
 */
export default function Slot({source, onClick, qty = 1}) {
  const image = source + '/icon.png';
  return (
    <button
      className={styles.slot}
      onClick={onClick}
      onKeyDown={(event) => {
        event.preventDefault();
      }}
    >
      <div
        className={styles.slotInner}
        style={image ? {backgroundImage: `url(${image})`} : {}}
      >
        {qty > 1 && (
          <span
            className={
              [styles.qty, `q-${Math.round(Math.log10(qty))}`]
                .filter(Boolean).join(' ')
            }
          >
            {qty}
          </span>
        )}
      </div>
    </button>
  );
}