Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | 8x 8x 10x 3x 1x 5x 1x | import React, { useState } from "react";
import ItemButton from "./ItemButton";
export default function ItemGrid({ items, onClick }) {
const [openIndex, setOpenIndex] = useState(null);
return (
<div className="aacboard-grid">
{openIndex === null ? (
items.map((item, index) => (
<ItemButton
key={item.parent.id}
item={item.parent}
onClick={() => setOpenIndex(index)}
/>
))
) : (
<>
<ItemButton
item={{
id: "back",
name: "Back",
image: "images/button_icons/back.png"
}}
onClick={() => setOpenIndex(null)}
/>
{items[openIndex].children.map((child) => (
<ItemButton
key={child.id}
item={child}
onClick={() => onClick(child)}
/>
))}
</>
)}
</div>
);
}
|