26 lines
639 B
TypeScript
26 lines
639 B
TypeScript
import { cn, getIndexArray } from "~/shared/utils";
|
|
|
|
type ProgressProps = {
|
|
value: number; // from 0 to 100
|
|
};
|
|
|
|
export const Progress = ({ value }: ProgressProps) => {
|
|
const activeBars = Math.round((value / 100) * 25);
|
|
|
|
return (
|
|
<div className="flex items-center gap-[5px] border border-white px-[10px] py-[8px]">
|
|
{getIndexArray(25).map((idx) => (
|
|
<div
|
|
key={idx}
|
|
className={cn("h-[14px] w-full", {
|
|
"bg-primary": idx < activeBars,
|
|
"bg-[#2B2B2B]": idx >= activeBars,
|
|
})}
|
|
/>
|
|
))}
|
|
|
|
<div className="ml-2 text-sm">{value}%</div>
|
|
</div>
|
|
);
|
|
};
|