forked from github/plane
54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
import { FC, ReactNode } from "react";
|
|
import { Network } from "lucide-react";
|
|
// hooks
|
|
import { Tooltip } from "@plane/ui";
|
|
import { renderFormattedTime, renderFormattedDate, calculateTimeAgo } from "helpers/date-time.helper";
|
|
import { useIssueDetail } from "hooks/store";
|
|
// ui
|
|
// components
|
|
import { IssueUser } from "../";
|
|
// helpers
|
|
|
|
type TIssueActivityBlockComponent = {
|
|
icon?: ReactNode;
|
|
activityId: string;
|
|
ends: "top" | "bottom" | undefined;
|
|
children: ReactNode;
|
|
customUserName?: string;
|
|
};
|
|
|
|
export const IssueActivityBlockComponent: FC<TIssueActivityBlockComponent> = (props) => {
|
|
const { icon, activityId, ends, children, customUserName } = props;
|
|
// hooks
|
|
const {
|
|
activity: { getActivityById },
|
|
} = useIssueDetail();
|
|
|
|
const activity = getActivityById(activityId);
|
|
|
|
if (!activity) return <></>;
|
|
return (
|
|
<div
|
|
className={`relative flex items-center gap-3 text-xs ${
|
|
ends === "top" ? `pb-2` : ends === "bottom" ? `pt-2` : `py-2`
|
|
}`}
|
|
>
|
|
<div className="absolute left-[13px] top-0 bottom-0 w-0.5 bg-custom-background-80" aria-hidden />
|
|
<div className="flex-shrink-0 ring-6 w-7 h-7 rounded-full overflow-hidden flex justify-center items-center z-[4] bg-custom-background-80 text-custom-text-200">
|
|
{icon ? icon : <Network className="w-3.5 h-3.5" />}
|
|
</div>
|
|
<div className="w-full text-custom-text-200">
|
|
<IssueUser activityId={activityId} customUserName={customUserName} />
|
|
<span> {children} </span>
|
|
<span>
|
|
<Tooltip
|
|
tooltipContent={`${renderFormattedDate(activity.created_at)}, ${renderFormattedTime(activity.created_at)}`}
|
|
>
|
|
<span className="whitespace-nowrap"> {calculateTimeAgo(activity.created_at)}</span>
|
|
</Tooltip>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|