esp8266-react-framework/interface/src/components/SectionContent.tsx
rjwats 260e9a18d0
Re-engineer UI in TypeScript (#89)
* Re-engineer UI in TypeScript
* Switch to named imports where possible
* Restructure file system layout
* Update depencencies
* Update README.md
* Change explicit colors for better support for dark theme
2020-02-09 10:21:13 +00:00

34 lines
760 B
TypeScript

import React from 'react';
import { Typography, Paper } from '@material-ui/core';
import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
content: {
padding: theme.spacing(2),
margin: theme.spacing(3),
}
})
);
interface SectionContentProps {
title: string;
titleGutter?: boolean;
}
const SectionContent: React.FC<SectionContentProps> = (props) => {
const { children, title, titleGutter } = props;
const classes = useStyles();
return (
<Paper className={classes.content}>
<Typography variant="h6" gutterBottom={titleGutter}>
{title}
</Typography>
{children}
</Paper>
);
};
export default SectionContent;