1 files changed, 54 insertions, 0 deletions
diff --git a/Timeline/ClientApp/src/app/home/TimelineBoard.tsx b/Timeline/ClientApp/src/app/home/TimelineBoard.tsx
new file mode 100644
index 00000000..ca77ab43
--- /dev/null
+++ b/Timeline/ClientApp/src/app/home/TimelineBoard.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Link } from 'react-router-dom';
+import { Spinner } from 'reactstrap';
+
+import { TimelineInfo } from '../data/timeline';
+
+import TimelineLogo from '../common/TimelineLogo';
+import UserTimelineLogo from '../common/UserTimelineLogo';
+
+export interface TimelineBoardProps {
+  title?: string;
+  timelines?: TimelineInfo[];
+  className?: string;
+}
+
+const TimelineBoard: React.FC<TimelineBoardProps> = props => {
+  const { title, timelines, className } = props;
+
+  return (
+    <div className={clsx('timeline-board', className)}>
+      {title != null && <h3 className="text-center">{title}</h3>}
+      {(() => {
+        if (timelines == null) {
+          return (
+            <div className="d-flex flex-grow-1 justify-content-center align-items-center">
+              <Spinner color="primary" />
+            </div>
+          );
+        } else {
+          return timelines.map(timeline => {
+            const { name } = timeline;
+            const isPersonal = name.startsWith('@');
+            const url = isPersonal
+              ? `/users/${timeline.owner.username}`
+              : `/timelines/${name}`;
+            return (
+              <div key={name} className="timeline-board-item">
+                {isPersonal ? (
+                  <UserTimelineLogo className="icon" />
+                ) : (
+                  <TimelineLogo className="icon" />
+                )}
+                <Link to={url}>{name}</Link>
+              </div>
+            );
+          });
+        }
+      })()}
+    </div>
+  );
+};
+
+export default TimelineBoard;