46 lines
933 B
JavaScript
46 lines
933 B
JavaScript
|
import { Checkbox, makeStyles } from '@material-ui/core';
|
||
|
|
import clsx from 'clsx';
|
||
|
|
import React from 'react';
|
||
|
|
import { iconbase, iconstyles } from '../../InfoPops/_/layericons';
|
||
|
|
|
||
|
|
const useStyle = makeStyles({
|
||
|
|
root: {
|
||
|
|
display: 'flex',
|
||
|
|
color: '#fff',
|
||
|
|
alignItems: 'center',
|
||
|
|
},
|
||
|
|
|
||
|
|
check: {
|
||
|
|
flexShrink: 0,
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
flexGrow: 1,
|
||
|
|
},
|
||
|
|
icon: {
|
||
|
|
...iconbase,
|
||
|
|
width: '1.4rem',
|
||
|
|
height: '1.4rem',
|
||
|
|
marginRight: '0.5rem',
|
||
|
|
},
|
||
|
|
|
||
|
|
...iconstyles,
|
||
|
|
});
|
||
|
|
|
||
|
|
function RowItem({ icon, name, label, checked, onChange }) {
|
||
|
|
const classes = useStyle();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={classes.root}>
|
||
|
|
<div className={clsx(classes.icon, classes[icon])}></div>
|
||
|
|
<div className={classes.label}>
|
||
|
|
{label}
|
||
|
|
</div>
|
||
|
|
<div className={classes.check}>
|
||
|
|
<Checkbox color="primary" checked={checked} onChange={onChange} name={name} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default RowItem;
|