web2019/static/js/shop/OrderPanel.jsx

49 lines
1.3 KiB
JavaScript

import React from 'react'
import {OrderSummary} from "./OrderSummary.jsx";
import {OrderForm} from "./OrderForm.jsx";
import {CrateList} from "./CrateList.jsx";
import {useShopStore} from "./shop_store";
/**
* Component that renders all things for order.
* It acts like-a layout, this component do nothing more.
*/
export function OrderPanel({title, description}) {
const isMobile = useShopStore((state) => state.isMobile);
const onClickToggleMobileSideMenu = useShopStore((state) => state.switchSideMenu);
const onClickOpenImport = useShopStore((state) => state.openImport);
return (<section className="panel">
<h2>{title}</h2>
<div className="control">
{description}
</div>
<div>
<button
className="btn btn-sm btn-outline-primary m-0 mb-2"
style={{'cursor': 'pointer'}}
onClick={onClickOpenImport}>Import JSON
</button>
</div>
{isMobile ? (
<div className="mobileBtnDisplaySideMenu">
<button onClick={onClickToggleMobileSideMenu}>
<img src="/images/shop/icon-add.svg" alt="add"/>
</button>
</div>
) : null}
<CrateList/>
<section className="summary">
<OrderForm/>
</section>
</section>);
}