From ade9ed64bd06384dfa3ea34f6fca61c58c047680 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 3 Sep 2020 23:00:38 +0800
Subject: Extract out info card template.

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

(limited to 'Timeline/ClientApp/src/app/views/timeline-common')

diff --git a/Timeline/ClientApp/src/app/views/timeline-common/InfoCardTemplate.tsx b/Timeline/ClientApp/src/app/views/timeline-common/InfoCardTemplate.tsx
new file mode 100644
index 00000000..a8de20aa
--- /dev/null
+++ b/Timeline/ClientApp/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