72 lines
2.5 KiB
TypeScript
72 lines
2.5 KiB
TypeScript
/**
|
|
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
* See the LICENSE file for details.
|
|
*/
|
|
|
|
import { SignalHigh } from "lucide-react";
|
|
import { useTranslation } from "@plane/i18n";
|
|
// types
|
|
import { PriorityIcon } from "@plane/propel/icons";
|
|
import { Tooltip } from "@plane/propel/tooltip";
|
|
import type { TIssuePriorities } from "@plane/types";
|
|
// constants
|
|
import { cn, getIssuePriorityFilters } from "@plane/utils";
|
|
|
|
export function IssueBlockPriority({
|
|
priority,
|
|
shouldShowName = false,
|
|
}: {
|
|
priority: TIssuePriorities | null;
|
|
shouldShowName?: boolean;
|
|
}) {
|
|
// hooks
|
|
const { t } = useTranslation();
|
|
const priority_detail = priority != null ? getIssuePriorityFilters(priority) : null;
|
|
|
|
const priorityClasses = {
|
|
urgent: "bg-layer-2 text-priority-urgent border-priority-urgent px-1",
|
|
high: "bg-layer-2 text-priority-high border-priority-high",
|
|
medium: "bg-layer-2 text-priority-medium border-priority-medium",
|
|
low: "bg-layer-2 text-priority-low border-priority-low",
|
|
none: "bg-layer-2 text-priority-none border-priority-none",
|
|
};
|
|
|
|
if (priority_detail === null) return <></>;
|
|
|
|
return (
|
|
<Tooltip tooltipHeading="Priority" tooltipContent={t(priority_detail?.titleTranslationKey || "")}>
|
|
<div
|
|
className={cn(
|
|
"flex h-full items-center gap-1.5 rounded-sm border-[0.5px] px-2 py-0.5 text-11",
|
|
priorityClasses[priority ?? "none"],
|
|
{
|
|
// compact the icons if text is hidden
|
|
"px-0.5": !shouldShowName,
|
|
// highlight the whole button if text is hidden and priority is urgent
|
|
"border-priority-urgent": priority === "urgent" && shouldShowName,
|
|
}
|
|
)}
|
|
>
|
|
{priority ? (
|
|
<PriorityIcon
|
|
priority={priority}
|
|
size={12}
|
|
className={cn("flex-shrink-0", {
|
|
// increase the icon size if text is hidden
|
|
"h-3.5 w-3.5": !shouldShowName,
|
|
// centre align the icons if text is hidden
|
|
"translate-x-[0.0625rem]": !shouldShowName && priority === "high",
|
|
"translate-x-0.5": !shouldShowName && priority === "medium",
|
|
"translate-x-1": !shouldShowName && priority === "low",
|
|
// highlight the icon if priority is urgent
|
|
})}
|
|
/>
|
|
) : (
|
|
<SignalHigh className="size-3" />
|
|
)}
|
|
{shouldShowName && <span className="pl-2 text-13">{t(priority_detail?.titleTranslationKey || "")}</span>}
|
|
</div>
|
|
</Tooltip>
|
|
);
|
|
}
|