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"; import { usePlatformOS } from "@/hooks/use-platform-os"; // 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); const { isMobile } = usePlatformOS(); 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 isMobile={isMobile} tooltipContent={`${renderFormattedDate(activity.created_at)}, ${renderFormattedTime(activity.created_at)}`} > <span className="whitespace-nowrap"> {calculateTimeAgo(activity.created_at)}</span> </Tooltip> </span> </div> </div> ); };