import { makeStyles, Box } from '@mui/material' import classnames from 'classnames' import * as R from 'ramda' import React from 'react' import ErrorMessage from 'src/components/ErrorMessage' import Title from 'src/components/Title' import { Info1, Label1 } from 'src/components/typography' import { SubpageButton } from 'src/components/buttons' import styles from './TitleSection.styles' const useStyles = makeStyles(styles) const TitleSection = ({ className, title, error, labels, buttons = [], children, appendix, appendixRight }) => { const classes = useStyles() return (
{title} {!!appendix && appendix} {error && ( Failed to save )} {buttons.length > 0 && ( <> {buttons.map((button, idx) => !R.isNil(button.component) ? ( button.component ) : ( {button.text} ) )} )}
{(labels ?? []).map(({ icon, label }, idx) => (
{icon}
{label}
))} {appendixRight}
{children}
) } export default TitleSection