plane/apps/app/components/core/sidebar/single-progress-stats.tsx
Aaryan Khandelwal cf8c902473
chore: update cycle and module stats logic (#1323)
* refactor: cycles stats

* chore: show assignee avatar in stats

* chore: cycles and modules sidebar stats refactor

* fix: build errors
2023-06-20 16:32:02 +05:30

43 lines
1.1 KiB
TypeScript

import React from "react";
import { ProgressBar } from "components/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 gap-4 justify-between rounded-sm p-1 text-xs ${
onClick ? "cursor-pointer hover:bg-brand-surface-1" : ""
} ${selected ? "bg-brand-surface-1" : ""}`}
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">
<ProgressBar value={completed} maxValue={total} />
</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>
);