@conduction/components/lib/components/displaySwitch/DisplaySwitch.js

React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as styles from "./DisplaySwitch.module.css";
import clsx from "clsx";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Button, ButtonGroup } from "@utrecht/component-library-react/dist/css-module";
const DisplaySwitch = ({ layoutClassName, buttons }) => {
    return (_jsx(ButtonGroup, { className: clsx(styles.displaySwitchButtons, [layoutClassName] && layoutClassName), children: buttons.map((button, idx) => {
            // TODO: Once the Rotterdam design system supports the "pressed" state,
            // remove the `appereance` switch, and use the same appearance for each button.
            return (_jsxs(Button, { pressed: button.pressed, appearance: button.pressed ? "secondary-action-button" : "subtle-button", onClick: button.handleClick, className: styles.button, children: [button.icon && _jsx(FontAwesomeIcon, { icon: [button.icon.prefix, button.icon.name] }), _jsx("span", { children: button.label })] }, idx));
        }) }));
};
export default DisplaySwitch;