This repository has been archived by the owner on Aug 31, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 57
/
Cases.tsx
111 lines (105 loc) · 2.83 KB
/
Cases.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import React from 'react';
import { useTranslation } from 'react-i18next';
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';
const previousButtonImg =
'https://gw.alipayobjects.com/zos/basement_prod/39d0ba49-5ae4-4fb7-86e1-ff90e79e30a0.svg';
const nextButtonImg =
'https://gw.alipayobjects.com/zos/basement_prod/27ce6e21-bbb6-4490-8326-43483ac39e0b.svg';
interface Case {
logo?: string;
title: string;
description: string;
link?: string;
image: string;
}
interface CasesProps {
cases: Case[];
style?: React.CSSProperties;
className?: string;
}
const Cases: React.FC<CasesProps> = ({ cases = [], style = {}, className }) => {
const { t } = useTranslation();
let slider: any;
const clickPrevious = () => {
slider.slickPrev();
};
const clickNext = () => {
slider.slickNext();
};
const getCases = () => {
let buttons: any;
if (cases.length > 1) {
buttons = (
<div className={styles.buttons}>
<img
className={styles.previousButton}
onClick={clickPrevious}
src={previousButtonImg}
alt="previous"
/>
<img
className={styles.nextButton}
onClick={clickNext}
src={nextButtonImg}
alt="next"
/>
</div>
);
}
const children = cases.map(app => {
let linkDiv;
if (app.link) {
linkDiv = (
<div className={styles.detailWrapper}>
<a className={styles.detail} href={app.link}>
{t('查看详情')}
</a>
</div>
);
}
return (
<div className={styles.appWrapper} key={app.title}>
<img className={styles.appTeaser} src={app.image} alt="image" />
<div className={styles.appLeft}>
<div className={styles.appContent}>
<img className={styles.appLogo} src={app.logo} alt="logo" />
<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 ? true : false,
infinite: true,
slidesToShow: 1,
adaptiveHeight: true,
speed: 500,
cssEase: 'linear',
arrows: false,
autoplay: true,
autoplaySpeed: 2000,
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;