import React from 'react' ; import { useTranslation } from 'react-i18next' ; import { ProductType } from './getProducts' ; import styles from './Product.module.less' ; interface ProductProps { name ? : string ; icon ? : string ; slogan ? : string ; description ? : string ; url ? : string ; links : ProductType [ 'links' ] ; style ? : React . CSSProperties ; language ? : string ; } const getTarget = ( url ) => url . startsWith ( 'http' ) && ! url . includes ( 'gitee.io' ) && ! url . includes ( 'antv.vision' ) ? '_blank' : '_self' ; const Product = ( { name , icon , url = '' , slogan , description , links = { } , style , language , } ) => { const { t } = useTranslation ( ) ; return ( < li className = { styles . product } style = { style } > < a href = { url } target = { getTarget ( url ) } > < img alt = { name } src = { icon } / > < /a> < div className = { styles . productContent } > < a href = { url } target = { getTarget ( url ) } > < h4 > { name } < span className = { styles . productSlogan } style = { { opacity : language === 'en' ? 0.7 : '' } } > { slogan } < /span> < /h4> < /a> < div className = { styles . productDescription } > { description } < /div> < div className = { styles . productLinks } > { links . home && ( < a href = { links . home . url } target = { getTarget ( links . home . url || '' ) } key = { links . home . url } > { links . home . title ?? t ( '产品首页' ) } < /a>)} { links . example && ( < a href = { links . example . url } target = { getTarget ( links . example . url || '' ) } key = { links . example . url } > { links . example . title ?? t ( '图表示例' ) } < /a>)} < /div> < /div> < /li>); } ; export default Product ;