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

111 lines
3.1 KiB
TypeScript
Raw Normal View History

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>
);
};