pankod/refine

import React from "react";
import { cleanFilePath } from "src/utils/clean-file-path";
import { Activity } from "src/interfaces/activity";
import clsx from "clsx";
import { getOwners } from "src/utils/get-owners";
import { DevToolsContext } from "@refinedev/devtools-shared";

export const Owners = ({ activity }: { activity: Activity }) => {
  const { devtoolsUrl } = React.useContext(DevToolsContext);

  const owners = getOwners(activity);

  return (
    <ul className={clsx("re-list-disc", "re-list-inside")}>
      {owners.map((owner, i) => {
        const cleanPath = cleanFilePath(owner.file);

        const openerUrl = `${devtoolsUrl}/open-in-editor/${cleanPath}?line=${
          owner.line ?? 1
        }&column=${owner.column ?? 1}`;

        return (
          <li key={i}>
            <div
              className={clsx(
                "re--ml-2",
                "re-inline-flex",
                "re-flex-col",
                "re-items-start",
                "re-gap-1",
                "re-max-w-[calc(100%-20px)]",
              )}
            >
              <span
                className={clsx(
                  "re-text-xs",
                  "re-text-gray-300",
                  "re-font-mono",
                  "re-break-all",
                )}
              >
                {owner.function}
              </span>
              <a
                href={openerUrl}
                target="_blank"
                rel="noopener noreferrer"
                className={clsx(
                  "re-no-underline",
                  "hover:re-underline",
                  "re-text-[10px]",
                  "re-text-gray-500",
                  "re-break-all",
                )}
              >
                {"at "}
                {cleanPath}
                {owner.line && `:${owner.line}`}
                {owner.column && `:${owner.column}`}
              </a>
            </div>
          </li>
        );
      })}
    </ul>
  );
};