plane/web/components/analytics/project-modal/header.tsx

import { observer } from "mobx-react-lite";

// icons
import { Expand, Shrink, X } from "lucide-react";

type Props = {
  fullScreen: boolean;
  handleClose: () => void;
  setFullScreen: React.Dispatch<React.SetStateAction<boolean>>;
  title: string;
};

export const ProjectAnalyticsModalHeader: React.FC<Props> = observer((props) => {
  const { fullScreen, handleClose, setFullScreen, title } = props;

  return (
    <div className="flex items-center justify-between gap-4 bg-neutral-component-surface-light px-5 py-4 text-sm">
      <h3 className="break-words">Analytics for {title}</h3>
      <div className="flex items-center gap-2">
        <button
          type="button"
          className="grid place-items-center p-1 text-neutral-text-medium hover:text-neutral-text-strong"
          onClick={() => setFullScreen((prevData) => !prevData)}
        >
          {fullScreen ? <Shrink size={14} strokeWidth={2} /> : <Expand size={14} strokeWidth={2} />}
        </button>
        <button
          type="button"
          className="grid place-items-center p-1 text-neutral-text-medium hover:text-neutral-text-strong"
          onClick={handleClose}
        >
          <X size={14} strokeWidth={2} />
        </button>
      </div>
    </div>
  );
});