import React from 'react' ; import { useTranslation } from 'react-i18next' ; import { ArrowLeftOutlined , ArrowRightOutlined } from '@ant-design/icons' ; import { Link } from 'gatsby' ; import Slider from 'react-slick' ; import classNames from 'classnames' ; import 'slick-carousel/slick/slick.css' ; import 'slick-carousel/slick/slick-theme.css' ; import styles from './Cases.module.less' ; interface Case { logo ? : string ; isAppLogo ? : boolean ; title : string ; description : string ; link ? : string ; image : string ; } interface CasesProps { cases : Case [ ] ; style ? : React . CSSProperties ; className ? : string ; } const Cases = ( { cases = [ ] , style = { } , className } ) => { const { t } = useTranslation ( ) ; let slider ; const clickPrevious = ( ) => { slider . slickPrev ( ) ; } ; const clickNext = ( ) => { slider . slickNext ( ) ; } ; const getCases = ( ) => { let buttons ; if ( cases . length > 1 ) { buttons = ( < div className = { styles . buttons } > < div className = { styles . controlButton } onClick = { clickPrevious } > < ArrowLeftOutlined className = { styles . controlButtonIcon } style = { { fontSize : '16px' } } /> < /div> < div className = { styles . controlButton } onClick = { clickNext } style = { { marginLeft : '-1px' } } > < ArrowRightOutlined className = { styles . controlButtonIcon } style = { { fontSize : '16px' } } /> < /div> < /div>); } const children = cases . map ( ( app ) => { const linkDiv = ( < div className = { styles . detailWrapper } style = { { display : app . link ? 'block' : 'none' } } > { app . link && app . link . startsWith ( 'http' ) ? ( < a className = { styles . detail } href = { app . link } target = "_blank" rel = "noopener noreferrer" > { t ( '查看详情' ) } < /a>) : (<Link className={styles.detail} to={app.link ? app.link : ''}> { t ( '查看详情' ) } < /Link>)} < /div>); return ( < div className = { styles . appWrapper } key = { app . title } > < img className = { styles . appTeaser } src = { app . image } alt = { app . title } / > < div className = { styles . appLeft } > < div className = { styles . appContent } > < img className = { styles . appLogo } src = { app . logo } alt = "logo" style = { { borderRadius : app . isAppLogo ? '15px' : '0px' , boxShadow : app . isAppLogo ? '0px 12px 24px #CED4D9' : '0px 0px 0px' , } } /> < p className = { styles . appTitle } > { app . title } < /p> < p className = { styles . appDescription } > { app . description } < /p> { linkDiv } < /div> { buttons } < /div> < /div>); } ) ; return children ; } ; const sliderSettings = { dots : cases . length > 1 , infinite : true , slidesToShow : 1 , adaptiveHeight : true , speed : 500 , cssEase : 'linear' , arrows : false , autoplay : true , autoplaySpeed : 3000 , fade : true , } ; return ( < div className = { classNames ( styles . wrapper , className ) } style = { style } > < Slider { ... sliderSettings } className = { styles . slider } ref = { ( c ) => { slider = c ; } } > { getCases ( ) } < /Slider> < /div>); } ; export default Cases ;