import React , { FC , ReactElement , useState , useContext , memo } from 'react' ; import { Icon } from '@contentpi/ui' ; import { STAGE_LINK } from '@constants/links' ; import { I18nContext } from '@contexts/i18n' ; import Link from '@ui/Link' ; import CreateAppModal from '@modals/CreateAppModal' ; import AppIcon from '../AppIcon' ; import { StyledCards } from './Cards.styled' ; interface iProps { items : any [ ] ; router : any ; } const Cards = ( { items , router } ) : ReactElement => { const { t } = useContext ( I18nContext ) ; const [ isOpen , setIsOpen ] = useState ( false ) ; const handleModal = ( ) : void => setIsOpen ( ! isOpen ) ; return ( < > < CreateAppModal label = { t ( 'Create New App' ) } isOpen = { isOpen } onClose = { handleModal } options = { { position : 'top' , width : '400px' } } /> < StyledCards > < h1 > { t ( 'My Apps' ) } < /h1> < ul > { items . map ( app => { router . appId = app . id ; return ( < li key = { app . id } > < Link href = { STAGE_LINK ( router ) . href } as = { STAGE_LINK ( router ) . as } > < section className = "card" title = { app . description } > < AppIcon app = { app } /> < /section> < /Link> < /li>); } ) } < li > < section className = "card" onClick = { handleModal } > < section className = "app" > < Icon type = "fas fa-plus" / > < /section> < span className = "createNewApp" > { t ( 'Create New App' ) } < /span> < /section> < /li> < /ul> < /StyledCards> < />); } ; export default memo ( Cards ) ;