49 lines
1.4 KiB
JavaScript
49 lines
1.4 KiB
JavaScript
import React from 'react'
|
|
import {OrderSummary} from "./OrderSummary";
|
|
import {OrderForm} from "./OrderForm";
|
|
import {CrateList} from "./CrateList";
|
|
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">
|
|
<OrderSummary/>
|
|
|
|
<OrderForm/>
|
|
</section>
|
|
|
|
</section>);
|
|
} |