Inventory Grid Component
Description
Develop an 8-bit styled Inventory Grid Block to display a grid of items (e.g., 4x4 slots). Each slot should show an item icon or be empty, with hover/click effects to highlight selection. The component should support adding/removing items dynamically.
Tasks
- Create a pixelated grid layout with 8-bit styled borders for each slot.
- Implement hover and click effects (e.g., glowing border) in 8-bit style.
- Provide an API to add/remove items (e.g.,
addItem(slotIndex, itemIcon)).
- Ensure the grid is scalable for different grid sizes (e.g., 3x3, 5x5).
- Include an example page same like other components but nest it into
ui/8bitcn/games, with setup instructions and a screenshot.
- Test with sample item icons and dynamic updates.
Acceptance Criteria
- Consistent 8-bit aesthetic with pixelated visuals.
- Smooth hover/click animations.
- Reusable and configurable for different grid sizes.
- Well-documented with clear usage examples.
Inventory Grid Component
Description
Develop an 8-bit styled Inventory Grid Block to display a grid of items (e.g., 4x4 slots). Each slot should show an item icon or be empty, with hover/click effects to highlight selection. The component should support adding/removing items dynamically.
Tasks
addItem(slotIndex, itemIcon)).ui/8bitcn/games, with setup instructions and a screenshot.Acceptance Criteria