plane/web/components/gantt-chart/chart/header.tsx

// hooks
import { Expand, Shrink } from "lucide-react";
import { useChart } from "../hooks";
// types
import { IGanttBlock, TGanttViews } from "../types";

type Props = {
  blocks: IGanttBlock[] | null;
  fullScreenMode: boolean;
  handleChartView: (view: TGanttViews) => void;
  handleToday: () => void;
  loaderTitle: string;
  title: string;
  toggleFullScreenMode: () => void;
};

export const GanttChartHeader: React.FC<Props> = (props) => {
  const { blocks, fullScreenMode, handleChartView, handleToday, loaderTitle, title, toggleFullScreenMode } = props;
  // chart hook
  const { currentView, allViews } = useChart();

  return (
    <div className="relative flex w-full flex-shrink-0 flex-wrap items-center gap-2 whitespace-nowrap px-2.5 py-2 z-10">
      <div className="flex items-center gap-2 text-lg font-medium">{title}</div>

      <div className="ml-auto">
        <div className="ml-auto text-sm font-medium">{blocks ? `${blocks.length} ${loaderTitle}` : "Loading..."}</div>
      </div>

      <div className="flex flex-wrap items-center gap-2">
        {allViews &&
          allViews.map((_chatView: any) => (
            <div
              key={_chatView?.key}
              className={`cursor-pointer rounded-sm p-1 px-2 text-xs ${
                currentView === _chatView?.key ? `bg-custom-background-80` : `hover:bg-custom-background-90`
              }`}
              onClick={() => handleChartView(_chatView?.key)}
            >
              {_chatView?.title}
            </div>
          ))}
      </div>

      <div className="flex items-center gap-1">
        <button
          type="button"
          className="rounded-sm p-1 px-2 text-xs hover:bg-custom-background-80"
          onClick={handleToday}
        >
          Today
        </button>
      </div>

      <button
        type="button"
        className="flex items-center justify-center rounded-sm border border-custom-border-200 p-1 transition-all hover:bg-custom-background-80"
        onClick={toggleFullScreenMode}
      >
        {fullScreenMode ? <Shrink className="h-4 w-4" /> : <Expand className="h-4 w-4" />}
      </button>
    </div>
  );
};