import { ReactNode } from 'react' ; import { ItemCardPanel , ItemContentPanel , ItemDetailPanel } from './styled' ; export interface ItemCardData { title : string ; content : ReactNode ; } export const ItemDetail = ( { item , hideLine } ) => ( < ItemDetailPanel hideLine = { hideLine } > < div className = "item__detail__title" > { item . title } < /div> < div className = "item__detail__value" > { item . content } < /div> < /ItemDetailPanel>); export default ( { items , children , outputIndex , } ) => ( < ItemCardPanel id = { outputIndex ? `output_${ outputIndex }` : '' } > < ItemContentPanel > { items . map ( ( item , index ) => ( < ItemDetail key = { item . title } item = { item } hideLine = { index === items . length - 1 } / > ) ) } < /ItemContentPanel> { children } < /ItemCardPanel>);