import React from 'react';
import PropTypes from 'prop-types';
import Box from '@material-ui/core/Box';
import { makeStyles } from '@material-ui/core/styles';
import { blueGrey } from '@material-ui/core/colors';
const useStyles = makeStyles({
root: {
left: 0,
height: 125,
width: '100%',
overflow: 'hidden',
fill: (props) => props.fill,
transform: (props) =>
props.invert ? 'scale(-1)' : 'none',
marginBottom: (props) =>
props.gutterBottom ? 48 : -10,
'&>svg': {
height: '100%',
width: '100%',
},
},
});
const Curve = () => (
);
const Swoop = () => (
);
const Brush = () => (
);
const Angle = () => (
);
const Lines = () => (
);
const Mountains = () => (
);
const Wave = () => (
);
const Wave2 = () => (
);
const Wave3 = () => (
);
const Wave4 = () => (
);
const Triangle = () => (
);
const Fade = ({ fill }) => (
);
Fade.propTypes = {
fill: PropTypes.string,
};
Fade.defaultProps = {
fill: '#999',
};
const Divider = ({ variant, ...rest }) => {
const { root } = useStyles(rest);
const getPattern = () => {
switch (variant) {
case 'wave':
return ;
case 'wave2':
return ;
case 'wave3':
return ;
case 'wave4':
return ;
case 'brush':
return ;
case 'curve':
return ;
case 'mountains':
return ;
case 'lines':
return ;
case 'angle':
return ;
case 'triangle':
return ;
case 'swoop':
return ;
case 'fade':
return ;
default:
return null;
}
};
return {getPattern()};
};
Divider.propTypes = {
variant: PropTypes.string.isRequired,
fill: PropTypes.string,
invert: PropTypes.bool,
gutterBottom: PropTypes.bool,
};
Divider.defaultProps = {
fill: blueGrey[50],
invert: false,
gutterBottom: false,
};
export default Divider;