68 lines
1.9 KiB
JavaScript
68 lines
1.9 KiB
JavaScript
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 (
|
|
<div className={classnames(classes.titleWrapper, className)}>
|
|
<div className={classes.titleAndButtonsContainer}>
|
|
<Title>{title}</Title>
|
|
{!!appendix && appendix}
|
|
{error && (
|
|
<ErrorMessage className={classes.error}>Failed to save</ErrorMessage>
|
|
)}
|
|
{buttons.length > 0 && (
|
|
<>
|
|
{buttons.map((button, idx) =>
|
|
!R.isNil(button.component) ? (
|
|
button.component
|
|
) : (
|
|
<SubpageButton
|
|
key={idx}
|
|
className={classes.subpageButton}
|
|
Icon={button.icon}
|
|
InverseIcon={button.inverseIcon}
|
|
toggle={button.toggle}
|
|
forceDisable={button.forceDisable}>
|
|
<Info1 className={classes.buttonText}>{button.text}</Info1>
|
|
</SubpageButton>
|
|
)
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
<Box display="flex" flexDirection="row" alignItems="center">
|
|
{(labels ?? []).map(({ icon, label }, idx) => (
|
|
<Box key={idx} display="flex" alignItems="center">
|
|
<div className={classes.icon}>{icon}</div>
|
|
<Label1 className={classes.label}>{label}</Label1>
|
|
</Box>
|
|
))}
|
|
{appendixRight}
|
|
</Box>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TitleSection
|