import React , { ReactElement } from "react" ; import clsx from "clsx" ; import { makeStyles , Theme } from "@material-ui/core/styles" ; import Grid from "@material-ui/core/Grid" ; import Typography from "@material-ui/core/Typography" ; import ReactMarkdown from "react-markdown" ; import { ConfigurationProps } from "./Configuration" ; import Item from "./Item" ; import { ConfigSectionItem } from "./Config" ; const useStyles = makeStyles ( ( theme ) => ( { icon : { marginRight : theme . spacing ( 2 ) , fontSize : 24 , } , item : { padding : theme . spacing ( 1.5 , 1 ) , borderBottom : "1px solid #EEE" , "&:first-child" : { paddingTop : 0 , } , "&:last-child" : { borderBottom : "none" , paddingBottom : 0 , } , } , } ) ) ; function Section ( props ) { const classes = useStyles ( ) ; return ( < Grid container direction = "row" alignContent = "center" justifyContent = "space-between" > { props . section . items . map ( ( item , key ) => { return ( < Grid key = { key } item container direction = "row" alignContent = "center" justifyContent = "space-between" className = { classes . item } > < Grid item xs container direction = "row" alignContent = "center" alignItems = "center" justifyContent = "space-between" > { item . icon && ( < Grid item > < span className = { clsx ( "mdi" , item . icon , classes . icon ) } /> < /Grid>)} { item . title && item . description && ( < Grid item xs > < Typography variant = "subtitle1" > { item . title } < /Typography> < Typography variant = "body2" component = "span" > < ReactMarkdown skipHtml = { false } > { item . description } < /ReactMarkdown> < /Typography> < /Grid>)} < Grid item > < Item { ... props } item = { item } path = { [ ... props . path , item . name ] } / > < /Grid> < /Grid> < /Grid>); } ) } < /Grid>); } export default Section ;