synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
92 lines (91 loc) • 2.27 kB
JavaScript
import { jsxs as a, jsx as r } from "react/jsx-runtime";
import { Box as i, Typography as s, styled as c } from "@mui/material";
import x from "../IconSvg/IconSvg.js";
import f from "./WizardChoiceButtonDescription.js";
const g = c(
i,
{
shouldForwardProp: (o) => o !== "selected"
}
)(({ theme: o, selected: e = !1 }) => ({
backgroundColor: e ? o.palette.grey[300] : o.palette.background.paper,
width: "100%",
border: "1px solid",
borderColor: o.palette.grey[200],
borderRadius: "5px",
"&:hover": {
backgroundColor: e ? o.palette.grey[200] : o.palette.grey[100]
},
[o.breakpoints.down("sm")]: {
flexDirection: "column"
}
}));
function k(o) {
const { title: e, description: t, icon: l, onClick: p, selected: d } = o;
return /* @__PURE__ */ a(
g,
{
component: "button",
role: "menuitem",
"aria-label": e,
display: "flex",
p: "20px",
onClick: p,
alignItems: "center",
gap: "10px",
selected: d,
children: [
l && /* @__PURE__ */ r(
i,
{
sx: (n) => ({
p: 3,
[n.breakpoints.down("sm")]: {
p: 0,
alignSelf: "flex-start"
}
}),
children: l
}
),
/* @__PURE__ */ a(i, { sx: { flexGrow: 1, textAlign: "left" }, children: [
/* @__PURE__ */ r(
s,
{
variant: "headline2",
sx: {
mb: "10px"
},
children: e
}
),
typeof t == "string" ? /* @__PURE__ */ r(f, { children: t }) : t
] }),
/* @__PURE__ */ r(
i,
{
sx: (n) => ({
flexShrink: 0,
[n.breakpoints.down("sm")]: { alignSelf: "flex-end" }
}),
children: /* @__PURE__ */ r(
x,
{
icon: "chevronRight",
fontSize: "large",
sx: {
color: "primary.light"
}
}
)
}
)
]
}
);
}
export {
g as WizardMenuItem,
k as default
};
//# sourceMappingURL=WizardChoiceButton.js.map