plane/web/components/issues/peek-overview/header.tsx

import Link from "next/link";

// hooks
import useToast from "hooks/use-toast";
// ui
import { CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon } from "@plane/ui";
// icons
import { LinkIcon, MoveDiagonal, MoveRight, Trash2 } from "lucide-react";
// helpers
import { copyTextToClipboard } from "helpers/string.helper";
// types
import { IIssue } from "types";
import { TPeekOverviewModes } from "./layout";

type Props = {
  handleClose: () => void;
  handleDeleteIssue: () => void;
  issue: IIssue | undefined;
  mode: TPeekOverviewModes;
  setMode: (mode: TPeekOverviewModes) => void;
  workspaceSlug: string;
};

const peekModes: {
  key: TPeekOverviewModes;
  icon: any;
  label: string;
}[] = [
  { key: "side", icon: SidePanelIcon, label: "Side Peek" },
  {
    key: "modal",
    icon: CenterPanelIcon,
    label: "Modal Peek",
  },
  {
    key: "full",
    icon: FullScreenPanelIcon,
    label: "Full Screen Peek",
  },
];

export const PeekOverviewHeader: React.FC<Props> = ({
  issue,
  handleClose,
  handleDeleteIssue,
  mode,
  setMode,
  workspaceSlug,
}) => {
  const { setToastAlert } = useToast();

  const handleCopyLink = () => {
    const urlToCopy = window.location.href;

    copyTextToClipboard(urlToCopy).then(() => {
      setToastAlert({
        type: "success",
        title: "Link copied!",
        message: "Issue link copied to clipboard",
      });
    });
  };

  const currentMode = peekModes.find((m) => m.key === mode);

  return (
    <div className="flex justify-between items-center">
      <div className="flex items-center gap-4">
        {mode === "side" && (
          <button type="button" onClick={handleClose}>
            <MoveRight className="h-3.5 w-3.5" />
          </button>
        )}
        <Link href={`/${workspaceSlug}/projects/${issue?.project}/issues/${issue?.id}`}>
          <a>
            <MoveDiagonal className="h-3.5 w-3.5" />
          </a>
        </Link>
        <CustomSelect
          value={mode}
          onChange={(val: TPeekOverviewModes) => setMode(val)}
          customButton={
            <button type="button" className={`grid place-items-center ${mode === "full" ? "rotate-45" : ""}`}>
              {currentMode && <currentMode.icon className="h-3.5 w-3.5" />}
            </button>
          }
        >
          {peekModes.map((mode) => (
            <CustomSelect.Option key={mode.key} value={mode.key}>
              <div className="flex items-center gap-1.5">
                <mode.icon className={`h-4 w-4 flex-shrink-0 -my-1 ${mode.key === "full" ? "rotate-45" : ""}`} />
                {mode.label}
              </div>
            </CustomSelect.Option>
          ))}
        </CustomSelect>
      </div>
      {(mode === "side" || mode === "modal") && (
        <div className="flex items-center gap-2 flex-shrink-0">
          <button type="button" onClick={handleCopyLink} className="-rotate-45">
            <LinkIcon className="h-3.5 w-3.5" />
          </button>
          <button type="button" onClick={handleDeleteIssue}>
            <Trash2 className="h-3.5 w-3.5" />
          </button>
        </div>
      )}
    </div>
  );
};