79 lines
2.0 KiB
TypeScript
79 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { Grid, Typography, Box, FormControlLabel, Checkbox } from '@mui/material';
|
|
import { SectionProps } from './types';
|
|
|
|
interface FeatureCheckboxesProps {
|
|
state: SectionProps['state'];
|
|
layout?: 'stack' | 'inline';
|
|
}
|
|
|
|
export const FeatureCheckboxesSection: React.FC<FeatureCheckboxesProps> = ({ state, layout = 'stack' }) => {
|
|
const options = [
|
|
{
|
|
label: 'Explainer',
|
|
checked: state.enableExplainer,
|
|
onChange: (checked: boolean) => state.setEnableExplainer(checked),
|
|
},
|
|
{
|
|
label: 'Illustration',
|
|
checked: state.enableIllustration,
|
|
onChange: (checked: boolean) => state.setEnableIllustration(checked),
|
|
},
|
|
{
|
|
label: 'Narration',
|
|
checked: state.enableNarration,
|
|
onChange: (checked: boolean) => state.setEnableNarration(checked),
|
|
},
|
|
{
|
|
label: 'Story Video',
|
|
checked: state.enableVideoNarration,
|
|
onChange: (checked: boolean) => state.setEnableVideoNarration(checked),
|
|
},
|
|
];
|
|
|
|
const renderCheckboxes = (direction: 'row' | 'column') => (
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexWrap: direction === 'row' ? 'wrap' : 'nowrap',
|
|
flexDirection: direction === 'row' ? 'row' : 'column',
|
|
gap: 1.5,
|
|
}}
|
|
>
|
|
{options.map((option) => (
|
|
<FormControlLabel
|
|
key={option.label}
|
|
control={
|
|
<Checkbox
|
|
checked={option.checked}
|
|
onChange={(e) => option.onChange(e.target.checked)}
|
|
size="small"
|
|
/>
|
|
}
|
|
label={option.label}
|
|
sx={{
|
|
m: 0,
|
|
'& .MuiFormControlLabel-label': {
|
|
fontWeight: 600,
|
|
},
|
|
}}
|
|
/>
|
|
))}
|
|
</Box>
|
|
);
|
|
|
|
if (layout === 'inline') {
|
|
return renderCheckboxes('row');
|
|
}
|
|
|
|
return (
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
|
|
Story Features
|
|
</Typography>
|
|
{renderCheckboxes('column')}
|
|
</Grid>
|
|
);
|
|
};
|
|
|