...

1 files changed, 101 insertions, 0 deletions

diff --git a/FrontEnd/src/views/home/TimelineListView.tsx b/FrontEnd/src/views/home/TimelineListView.tsx
new file mode 100644
index 00000000..975875af
--- /dev/null
+++ b/FrontEnd/src/views/home/TimelineListView.tsx
@@ -0,0 +1,101 @@
+import React from "react";
+
+import { convertI18nText, I18nText } from "@/common";
+
+import { HttpTimelineInfo } from "http/timeline";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+
+interface TimelineListItemProps {
+  timeline: HttpTimelineInfo;
+}
+
+const TimelineListItem: React.FC<TimelineListItemProps> = ({ timeline }) => {
+  const url = React.useMemo(
+    () =>
+      timeline.name.startsWith("@")
+        ? `/users/${timeline.owner.username}`
+        : `/timelines/${timeline.name}`,
+    [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>
+        <div>{timeline.title}</div>
+        <div>
+          <small className="text-secondary">{timeline.description}</small>
+        </div>
+      </div>
+      <Link to={url}>
+        <i className="icon-button bi-arrow-right 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?: HttpTimelineInfo[];
+}
+
+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.name} timeline={t} />)
+        : null}
+      <TimelineListArrow />
+    </div>
+  );
+};
+
+export default TimelineListView;