53 lines
1.5 KiB
JavaScript
53 lines
1.5 KiB
JavaScript
import { makeStyles, Box } from '@material-ui/core'
|
|
import classnames from 'classnames'
|
|
import React from 'react'
|
|
|
|
import ErrorMessage from 'src/components/ErrorMessage'
|
|
import Title from 'src/components/Title'
|
|
import { SubpageButton } from 'src/components/buttons'
|
|
import { Info1, Label1 } from 'src/components/typography'
|
|
|
|
import styles from './TitleSection.styles'
|
|
|
|
const useStyles = makeStyles(styles)
|
|
|
|
const TitleSection = ({
|
|
className,
|
|
title,
|
|
error,
|
|
labels,
|
|
button,
|
|
children
|
|
}) => {
|
|
const classes = useStyles()
|
|
return (
|
|
<div className={classnames(classes.titleWrapper, className)}>
|
|
<div className={classes.titleAndButtonsContainer}>
|
|
<Title>{title}</Title>
|
|
{error && (
|
|
<ErrorMessage className={classes.error}>Failed to save</ErrorMessage>
|
|
)}
|
|
{button && (
|
|
<SubpageButton
|
|
className={classes.subpageButton}
|
|
Icon={button.icon}
|
|
InverseIcon={button.inverseIcon}
|
|
toggle={button.toggle}>
|
|
<Info1 className={classes.buttonText}>{button.text}</Info1>
|
|
</SubpageButton>
|
|
)}
|
|
</div>
|
|
<Box display="flex" flexDirection="row">
|
|
{(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>
|
|
))}
|
|
</Box>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TitleSection
|