import { PropsWithChildren , CSSProperties } from 'react' ; import { IRow } from './IRow' ; import { HrefTargetBlank } from '.' ; /** Description Recusion Generator */ export function CommonDescription ( { descriptions , option , } ) { return ( < > { descriptions ? ( < ul className = { option ?. padding ? 'pt-2' : '' } > { descriptions . map ( ( description , descIndex ) => { return ( < > < Description description = { description } key = { descIndex . toString ( ) } / > { description . descriptions ? ( < DescriptionRecursion descriptions = { description . descriptions } key = { descIndex . toString ( ) } / > ) : ( '' ) } < />); } ) } < /ul>) : ('')} < />); } function DescriptionRecursion ( { descriptions , } ) { return ( < ul > { descriptions . map ( ( description , index ) => { return ( < > < Description description = { description } key = { index . toString ( ) } / > { description . descriptions ? ( < DescriptionRecursion descriptions = { description . descriptions } key = { index . toString ( ) } / > ) : ( '' ) } < />); } ) } < /ul>); } function Description ( { description } ) { const { content , href , postImage , postHref , weight } = description ; const component = ( ( ) => { if ( href && postImage ) { return ( < li style = { getFontWeight ( weight ) } > < HrefTargetBlank url = { href } text = { content } / > < img src = { postImage } alt = { postImage } / > < /li>); } if ( href ) { return ( < li style = { getFontWeight ( weight ) } > < HrefTargetBlank url = { href } text = { content } / > < /li>); } if ( postHref && postImage ) { return ( < li style = { getFontWeight ( weight ) } > { content } < HrefTargetBlank url = { postHref } text = { postHref } / > { ' ' } < img src = { postImage } alt = { postImage } / > < /li>); } if ( postHref ) { return ( < li style = { getFontWeight ( weight ) } > { content } < HrefTargetBlank url = { postHref } text = { postHref } / > < /li>); } if ( postImage ) { return ( < li style = { getFontWeight ( weight ) } > { content } < img src = { postImage } alt = { postImage } / > < /li>); } return < li style = { getFontWeight ( weight ) } > { content } < /li>; } ) ( ) ; return component ; } function getFontWeight ( weight ? ) { if ( ! weight ) { return { } ; } return { fontWeight : fontWeight [ weight || 'DEFAULT' ] , } ; } const fontWeight = { DEFAULT : 300 , LIGHT : 300 , REGULAR : 300 , MEDIUM : 500 , BOLD : 500 , } ;