import React , { FunctionComponent , ReactNode } from "react" ; import clsx from "clsx" ; import styles from "./styles.module.scss" ; import { Entry } from "./types" ; const Cell = ( { children , entry , icon , depth , onClick , action , active } ) => { return ( < div > < div className = { clsx ( styles . cellMain , { [ styles . cellMainActive ] : active } ) } > < button type = "button" className = { styles . cellButton } style = { { paddingLeft : `${ ( depth + 1 ) * 0.75 }rem` } } onClick = { onClick } > < div className = { styles . cellIcon } > { icon } < /div> < div className = { styles . cellLabel } > { entry . name } < /div> < /button> { action && < div className = { styles . cellAction } > { action } < /div>} < /div> { children } < /div>); } ; export default Cell ;