35 lines
1.2 KiB
JavaScript
35 lines
1.2 KiB
JavaScript
import React from 'react'
|
|
import {Accordion} from "react-bootstrap";
|
|
import {Crate} from "./Crate";
|
|
import {useShopStore} from "./shop_store";
|
|
|
|
export function CrateList() {
|
|
const {
|
|
crates,
|
|
active_crate,
|
|
onAddCrate,
|
|
setActiveCrate,
|
|
} = useShopStore(state=> ({
|
|
crates: state.crates,
|
|
active_crate: state.active_crate,
|
|
onAddCrate: state.newCrate,
|
|
setActiveCrate: state.setActiveCrate,
|
|
}));
|
|
return (
|
|
<Accordion defaultActiveKey={active_crate}>
|
|
{crates.map((crate, index) =>
|
|
<Accordion.Item eventKey={crate.id} key={"accordion"+crate.id} >
|
|
<Accordion.Header onClick={() => setActiveCrate(crate.id)}>Crate #{`${index}`}</Accordion.Header>
|
|
<Accordion.Body>
|
|
<Crate crate_index={index}/>
|
|
</Accordion.Body>
|
|
</Accordion.Item>
|
|
)}
|
|
<Accordion.Item eventKey="last">
|
|
<Accordion.Header onClick={onAddCrate}>
|
|
Add new crate
|
|
<img src="/images/shop/icon-add.svg" alt="add" width="32px"/>
|
|
</Accordion.Header>
|
|
</Accordion.Item>
|
|
</Accordion>)
|
|
} |