Files
snort/packages/app/src/Components/Progress/Progress.tsx
2024-01-04 19:01:18 +02:00

23 lines
548 B
TypeScript

import "./Progress.css";
import { CSSProperties, ReactNode } from "react";
import { FormattedNumber } from "react-intl";
export default function Progress({ value, status }: { value: number; status?: ReactNode }) {
const v = Math.max(0.01, Math.min(1, value));
return (
<div className="progress">
<div
style={
{
"--progress": `${v * 100}%`,
} as CSSProperties
}></div>
<span>
{status}
<FormattedNumber value={v} style="percent" />
</span>
</div>
);
}