plane/apps/app/components/core/sidebar/single-progress-stats.tsx

import React from "react";

import { ProgressBar } from "components/ui";

type TSingleProgressStatsProps = {
  title: any;
  completed: number;
  total: number;
};

export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
  title,
  completed,
  total,
}) => (
  <div className="flex w-full items-center justify-between border-b-[1px] py-3 text-xs">
    <div className="flex w-1/2 items-center justify-start gap-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 ">
          <ProgressBar value={completed} maxValue={total} />
        </span>
        <span className="w-8 text-right">{Math.floor((completed / total) * 100)}%</span>
      </div>
      <span>of</span>
      <span>{total}</span>
    </div>
  </div>
);