78 lines
1.8 KiB
TypeScript
78 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import clsx from 'clsx';
|
|
import { makeStyles } from '@material-ui/core/styles';
|
|
|
|
export enum Size {
|
|
Small = 'small',
|
|
Medium = 'medium',
|
|
Large = 'large',
|
|
}
|
|
|
|
export enum BgColor {
|
|
Primary = 'primary',
|
|
PrimaryDark = 'primary.dark',
|
|
Secondary = 'secondary',
|
|
SecondaryDark = 'secondary.dark',
|
|
}
|
|
|
|
export interface SectionProps extends React.HTMLAttributes<HTMLElement> {
|
|
size?: Size;
|
|
bgColor?: BgColor;
|
|
className?: string;
|
|
}
|
|
|
|
const Section = ({
|
|
size = Size.Small,
|
|
bgColor,
|
|
className,
|
|
children,
|
|
...rest
|
|
}: SectionProps) => {
|
|
const classes = useStyles();
|
|
return (
|
|
<section
|
|
className={clsx(className, classes.section, {
|
|
'is-medium': size === Size.Medium,
|
|
'is-large': size === Size.Large,
|
|
'is-primary': bgColor === BgColor.Primary,
|
|
'is-primary-dark': bgColor === BgColor.PrimaryDark,
|
|
'is-secondary': bgColor === BgColor.Secondary,
|
|
'is-secondary-dark': bgColor === BgColor.SecondaryDark,
|
|
})}
|
|
{...rest}
|
|
>
|
|
{children}
|
|
</section>
|
|
);
|
|
};
|
|
|
|
const useStyles = makeStyles(theme => ({
|
|
section: {
|
|
padding: theme.spacing(3, 0),
|
|
'&.is-medium': {
|
|
padding: theme.spacing(8, 0),
|
|
},
|
|
'&.is-large': {
|
|
padding: theme.spacing(15, 0),
|
|
},
|
|
'&.is-primary': {
|
|
backgroundColor: theme.palette.primary.main,
|
|
color: theme.palette.primary.contrastText,
|
|
},
|
|
'&.is-primary-dark': {
|
|
backgroundColor: theme.palette.primary.dark,
|
|
color: theme.palette.primary.contrastText,
|
|
},
|
|
'&.is-secondary': {
|
|
backgroundColor: theme.palette.secondary.main,
|
|
color: theme.palette.secondary.contrastText,
|
|
},
|
|
'&.is-secondary-dark': {
|
|
backgroundColor: theme.palette.secondary.dark,
|
|
color: theme.palette.secondary.contrastText,
|
|
},
|
|
},
|
|
}));
|
|
|
|
export default Section;
|