35 lines
981 B
TypeScript
35 lines
981 B
TypeScript
import { itemVisual } from '../theme/assets';
|
|
import styles from './ItemBar.module.css';
|
|
|
|
interface Props {
|
|
items: string[];
|
|
/** Icon size in px. */
|
|
size: number;
|
|
slots?: number;
|
|
}
|
|
|
|
/** A row of item icons; the leftmost item is used next. */
|
|
export function ItemBar({ items, size, slots }: Props) {
|
|
const count = Math.max(slots ?? 0, items.length);
|
|
return (
|
|
<div className={styles.bar} style={{ minHeight: size + 6 }}>
|
|
{Array.from({ length: count }, (_, i) => {
|
|
const id = items[i];
|
|
if (!id) return <span key={i} className={styles.empty} style={{ width: size, height: size }} />;
|
|
const visual = itemVisual(id);
|
|
return (
|
|
<img
|
|
key={i}
|
|
className={[styles.icon, i === 0 ? styles.first : ''].join(' ')}
|
|
src={visual.icon}
|
|
alt={visual.name}
|
|
title={visual.name}
|
|
width={size}
|
|
height={size}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|