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
|
import * as React from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { convertI18nText, I18nText } from "@/common";
import { TimelineBookmark } from "@/http/bookmark";
import IconButton from "../common/button/IconButton";
interface TimelineListItemProps {
timeline: TimelineBookmark;
}
const TimelineListItem: React.FC<TimelineListItemProps> = ({ timeline }) => {
return (
<div className="home-timeline-list-item home-timeline-list-item-timeline">
<svg className="home-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.timelineOwner}/{timeline.timelineName}
</div>
<Link to={`${timeline.timelineOwner}/${timeline.timelineName}`}>
<IconButton icon="arrow-right" className="ms-3" />
</Link>
</div>
);
};
const TimelineListArrow: React.FC = () => {
return (
<div>
<div className="home-timeline-list-item">
<svg className="home-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-timeline-list-item">
<svg
className="home-timeline-list-item-line home-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?: TimelineBookmark[];
}
const TimelineListView: React.FC<TimelineListViewProps> = ({
headerText,
timelines,
}) => {
const { t } = useTranslation();
return (
<div className="home-timeline-list">
<div className="home-timeline-list-item">
<svg className="home-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.timelineOwner}/${t.timelineName}`}
timeline={t}
/>
))
: null}
<TimelineListArrow />
</div>
);
};
export default TimelineListView;
|
