@seasketch/geoprocessing
Version:
Geoprocessing and reporting framework for SeaSketch 2.0
39 lines • 1.69 kB
JavaScript
import React from "react";
import Toolbar from "./Toolbar.js";
export const ToolbarCard = ({ children, toolbarStyle, title = React.createElement(React.Fragment, null), titleStyle = {}, items = React.createElement(React.Fragment, null), itemsStyle = {}, }) => {
const styles = {
box: {
fontFamily: "sans-serif",
borderRadius: 4,
backgroundColor: "#fff",
boxShadow: "0px 1px 3px 0px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 2px 1px -1px rgba(0,0,0,0.12)",
padding: 16,
margin: "8px 0px",
},
left: {
fontSize: "1em",
fontWeight: 500,
color: "#6C7282",
marginBottom: 0,
marginTop: 0,
minHeight: 24,
},
right: {
display: "flex",
alignItems: "center",
},
};
return (React.createElement("div", { style: { position: "relative", ...styles.box, ...toolbarStyle }, role: "region", "aria-label": typeof title === "string" ? title : "Report" },
title && title !== "" && (React.createElement(Toolbar, { titleAlign: "center", variant: "min", useGutters: false },
React.createElement("h1", { style: {
...styles.left,
...titleStyle,
} }, title),
React.createElement("div", { style: {
...styles.right,
...itemsStyle,
}, role: "toolbar", "aria-label": (typeof title === "string" ? title : "Report") + " toolbar items" }, items))),
children));
};
export default ToolbarCard;
//# sourceMappingURL=ToolbarCard.js.map