import React from "react"; import { CircularProgressIndicator } from "@plane/ui"; type TSingleProgressStatsProps = { title: any; completed: number; total: number; onClick?: () => void; selected?: boolean; }; export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({ title, completed, total, onClick, selected = false, }) => ( <div className={`flex w-full items-center justify-between gap-4 rounded-sm p-1 text-xs ${ onClick ? "cursor-pointer hover:bg-custom-background-90" : "" } ${selected ? "bg-custom-background-90" : ""}`} onClick={onClick} > <div className="w-1/2">{title}</div> <div className="flex w-1/2 items-center justify-end gap-1 px-2"> <div className="flex h-5 items-center justify-center gap-1"> <span className="h-4 w-4"> <CircularProgressIndicator percentage={(completed / total) * 100} size={14} strokeWidth={2} /> </span> <span className="w-8 text-right"> {isNaN(Math.round((completed / total) * 100)) ? "0" : Math.round((completed / total) * 100)}% </span> </div> <span>of {total}</span> </div> </div> );