Timeline/ClientApp/src/app/views/timeline-common/CollapseCard.tsx


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

import React from "react";
import clsx from "clsx";

import SyncStatusBadge, {
  TimelineSyncStatus,
} from "../timeline-common/SyncStatusBadge";
import CollapseButton from "../timeline-common/CollapseButton";

const CollapseCard: React.FC<{
  className?: string;
  syncStatus: TimelineSyncStatus;
  toggleCollapse: () => void;
  visible: boolean;
}> = ({ className, syncStatus, toggleCollapse, visible }) => {
  return (
    <div
      style={{ visibility: visible ? "visible" : "hidden" }}
      className={clsx("cru-card p-2", className)}
    >
      <div className="d-flex align-items-center">
        <SyncStatusBadge status={syncStatus} className="mr-2" />
        <CollapseButton collapse onClick={toggleCollapse} />
      </div>
    </div>
  );
};

export default CollapseCard;