plane/web/components/core/sidebar/single-progress-stats.tsx
sriram veeraghanta 5b0066140f chore: format all files in monorepo (#3054)
* chore: format all files in the project

* fix: removing @types/react from dependencies

* fix: adding prettier and eslint config

* chore: format files

* fix: upgrading turbo version

* chore: ignoring warnings and adding todos

* fix: updated the type of bubble menu item in the document editor

* chore: format files

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
2023-12-10 15:50:45 +05:30

40 lines
1.1 KiB
TypeScript

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.floor((completed / total) * 100)) ? "0" : Math.floor((completed / total) * 100)}%
</span>
</div>
<span>of {total}</span>
</div>
</div>
);