plane/web/components/issues/issue-detail/label/label-list-item.tsx

import { FC } from "react";
import { X } from "lucide-react";
// types
import { useIssueDetail, useLabel } from "@/hooks/store";
import { TLabelOperations } from "./root";

type TLabelListItem = {
  workspaceSlug: string;
  projectId: string;
  issueId: string;
  labelId: string;
  labelOperations: TLabelOperations;
  disabled: boolean;
};

export const LabelListItem: FC<TLabelListItem> = (props) => {
  const { workspaceSlug, projectId, issueId, labelId, labelOperations, disabled } = props;
  // hooks
  const {
    issue: { getIssueById },
  } = useIssueDetail();
  const { getLabelById } = useLabel();

  const issue = getIssueById(issueId);
  const label = getLabelById(labelId);

  const handleLabel = async () => {
    if (issue && !disabled) {
      const currentLabels = issue.label_ids.filter((_labelId) => _labelId !== labelId);
      await labelOperations.updateIssue(workspaceSlug, projectId, issueId, { label_ids: currentLabels });
    }
  };

  if (!label) return <></>;
  return (
    <div
      key={labelId}
      className={`transition-all relative flex items-center gap-1 truncate border border-custom-border-100 rounded-full text-xs p-0.5 px-1 group ${
        !disabled ? "cursor-pointer hover:border-red-500/50 hover:bg-red-500/20" : "cursor-not-allowed"
      } `}
      onClick={handleLabel}
    >
      <div
        className="rounded-full h-2 w-2 flex-shrink-0"
        style={{
          backgroundColor: label.color ?? "#000000",
        }}
      />
      <div className="truncate">{label.name}</div>
      {!disabled && (
        <div className="flex-shrink-0">
          <X className="transition-all h-2.5 w-2.5 group-hover:text-red-500" />
        </div>
      )}
    </div>
  );
};