From ac769e656b122ff569c3f1534701b71e00fed586 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 27 Oct 2020 19:21:35 +0800
Subject: Split front and back end.

---
 .../app/views/timeline-common/InfoCardTemplate.tsx | 26 ++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 FrontEnd/src/app/views/timeline-common/InfoCardTemplate.tsx

(limited to 'FrontEnd/src/app/views/timeline-common/InfoCardTemplate.tsx')

diff --git a/FrontEnd/src/app/views/timeline-common/InfoCardTemplate.tsx b/FrontEnd/src/app/views/timeline-common/InfoCardTemplate.tsx
new file mode 100644
index 00000000..a8de20aa
--- /dev/null
+++ b/FrontEnd/src/app/views/timeline-common/InfoCardTemplate.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import clsx from "clsx";
+
+import { TimelineCardComponentProps } from "../timeline-common/TimelinePageTemplateUI";
+import SyncStatusBadge from "../timeline-common/SyncStatusBadge";
+import CollapseButton from "../timeline-common/CollapseButton";
+
+const InfoCardTemplate: React.FC<
+  Pick<
+    TimelineCardComponentProps<"">,
+    "collapse" | "toggleCollapse" | "syncStatus" | "className"
+  > & { children: React.ReactElement[] }
+> = ({ collapse, toggleCollapse, syncStatus, className, children }) => {
+  return (
+    <div className={clsx("cru-card p-2 clearfix", className)}>
+      <div className="float-right d-flex align-items-center">
+        <SyncStatusBadge status={syncStatus} className="mr-2" />
+        <CollapseButton collapse={collapse} onClick={toggleCollapse} />
+      </div>
+
+      <div style={{ display: collapse ? "none" : "block" }}>{children}</div>
+    </div>
+  );
+};
+
+export default InfoCardTemplate;
-- 
cgit v1.2.3