import React from 'react' ; import { makeStyles } from '@material-ui/core/styles' ; import { Button , Divider , Grid , Theme } from "@material-ui/core" ; import { useActions , useAppState } from '../../Overmind/OvermindHelper' ; import { TitledListItemInterface } from '../../Others/Interfaces' ; import ListTitle from './ListTitle' ; import OurListItem from './OurListItem' ; interface Props { item : TitledListItemInterface ; } const getThemeObj = ( theme ) => { return { root : { marginTop : 4 , marginLeft : 8 , marginBottom : 16 , } , itemRoot : { marginTop : 8 } } ; } ; const useStyles = makeStyles ( ( theme ) => ( getThemeObj ( theme ) ) ) ; const ListItemWithIcon = ( props ) => { const { } = useActions ( ) ; const { } = useAppState ( ) ; const { item } = props ; const { text , arr } = item ; const classes = useStyles ( ) ; return < Grid container direction = 'column' className = { classes . root } > < ListTitle title = { text } /> < Grid container direction = 'row' className = { classes . itemRoot } > { arr . map ( ( arrItem , index ) => { return < OurListItem item = { arrItem } />; } ) } < /Grid> < /Grid>; } ; export default ListItemWithIcon ;