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
|
import React from "react";
import { convertI18nText, I18nText } from "@/common";
import { HttpTimelineInfo } from "@/http/timeline";
import { useTranslation } from "react-i18next";
interface TimelineListItemProps {
timeline: HttpTimelineInfo;
}
const TimelineListItem: React.FC<TimelineListItemProps> = ({ timeline }) => {
return (
<div className="home-v2-timeline-list-item">
<svg className="home-v2-timeline-list-item-line" viewBox="0 0 120 100">
<path
d="M 80,50 m 0,-12 a 12 12 180 1 1 0,24 12 12 180 1 1 0,-24 z M 60,0 h 40 v 100 h -40 z"
fillRule="evenodd"
fill="#007bff"
/>
</svg>
<div>{timeline.title}</div>
</div>
);
};
const TimelineListLoading: React.FC = () => {
return (
<div>
<div className="home-v2-timeline-list-item">
<svg className="home-v2-timeline-list-item-line" viewBox="0 0 120 60">
<path d="M 60,0 h 40 v 20 l -20,20 l -20,-20 z" fill="#007bff" />
</svg>
</div>
<div className="home-v2-timeline-list-item">
<svg
className="home-v2-timeline-list-item-line home-v2-timeline-list-loading-head"
viewBox="0 0 120 40"
>
<path
d="M 60,10 l 20,20 l 20,-20"
fill="none"
stroke="#007bff"
strokeWidth="5"
/>
</svg>
</div>
</div>
);
};
interface TimelineListViewProps {
headerText?: I18nText;
timelines?: HttpTimelineInfo[];
}
const TimelineListView: React.FC<TimelineListViewProps> = ({
headerText,
timelines,
}) => {
const { t } = useTranslation();
return (
<div className="home-v2-timeline-list">
<div className="home-v2-timeline-list-item">
<svg className="home-v2-timeline-list-item-line" viewBox="0 0 120 120">
<path
d="M 0,20 Q 80,20 80,80 l 0,40"
stroke="#007bff"
strokeWidth="40"
fill="none"
/>
</svg>
<h3>{convertI18nText(headerText, t)}</h3>
</div>
{timelines != null ? (
timelines.map((t) => <TimelineListItem key={t.name} timeline={t} />)
) : (
<TimelineListLoading />
)}
</div>
);
};
export default TimelineListView;
|
