29 lines
1.2 KiB
JavaScript
29 lines
1.2 KiB
JavaScript
import React from 'react'
|
|
import {Accordion} from "react-bootstrap";
|
|
import {Crate} from "./Crate.jsx";
|
|
|
|
export function CrateList({crates, isMobile, isTouch, onAddCrate, onDeleteCrate}) {
|
|
const onClickAdd = (_) => {
|
|
onAddCrate("crate" + Object.entries(crates).length);
|
|
}
|
|
|
|
return (
|
|
<Accordion defaultActiveKey="0">
|
|
{Object.entries(crates).map(([crate_id, crate], index) =>
|
|
<Accordion.Item eventKey={`${index}`} key={`crate${index}`}>
|
|
<Accordion.Header>Crate #{`${index}`}</Accordion.Header>
|
|
<Accordion.Body>
|
|
<Crate data={{id: crate_id, ...crate}} isTouch={isTouch} isMobile={isMobile} onDelete={onDeleteCrate}/>
|
|
</Accordion.Body>
|
|
</Accordion.Item>
|
|
)}
|
|
<Accordion.Item eventKey="last">
|
|
<Accordion.Header>
|
|
Add new crate
|
|
<button style={{width: "32px"}} onClick={onClickAdd}>
|
|
<img src="/images/shop/icon-add.svg" alt="add" />
|
|
</button>
|
|
</Accordion.Header>
|
|
</Accordion.Item>
|
|
</Accordion>)
|
|
} |