@vectara/vectara-ui
Version:
Vectara's design system, codified as a React and Sass component library
12 lines (11 loc) • 1.45 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { BiPencil } from "react-icons/bi";
import classNames from "classnames";
import { VuiFlexContainer } from "../flex/FlexContainer";
import { VuiIcon } from "../icon/Icon";
import { VuiSpacer } from "../spacer/Spacer";
import { VuiText } from "../typography/Text";
export const VuiComplexConfigurationButton = ({ title, description, footer, icon, onClick, isDisabled, className, "data-testid": dataTestId, "aria-label": ariaLabel }) => {
const classes = classNames("vuiComplexConfigurationButton", className);
return (_jsxs("button", Object.assign({ type: "button", className: classes, onClick: onClick, disabled: isDisabled, "data-testid": dataTestId, "aria-label": ariaLabel }, { children: [_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "spaceBetween" }, { children: [_jsx(VuiText, Object.assign({ align: "left" }, { children: _jsx("p", { children: _jsx("strong", { children: title }) }) })), _jsx(VuiIcon, Object.assign({ size: "m", color: "primary" }, { children: icon !== null && icon !== void 0 ? icon : _jsx(BiPencil, {}) }))] })), description && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), _jsx(VuiText, Object.assign({ align: "left" }, { children: _jsx("p", { children: description }) }))] })), footer && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), footer] }))] })));
};