A small static SVG icon of a Minecraft-style block drawn in its material's tint, plus a recessed inventory slot that holds one with an item count, used for hotbars and inventories.
import { BlockIcon, BlockSlot } from "@/components/ui/block-icon";
const TYPES = [
"grass",
"dirt",
"stone",
"ore",
"sand",
"log",
"planks",
"leaves",
"glass",
] as const;
export default function BlockIconDemo() {
return (
<div className="flex min-h-[220px] w-full flex-col items-center justify-center gap-6 bg-background p-8 text-foreground">
<div className="flex flex-wrap items-center justify-center gap-3">
{TYPES.map((type) => (
<BlockIcon key={type} type={type} />
))}
</div>
<div className="flex items-center gap-3">
<BlockSlot item={{ type: "stone", count: 3 }} />
<BlockSlot item={{ type: "planks", count: 32 }} selected />
<BlockSlot item={null} />
</div>
</div>
);
}