25 lines
713 B
TypeScript
25 lines
713 B
TypeScript
import { View } from "react-native";
|
|
import { PROGRESS_THRESHOLDS } from "@/lib/constants";
|
|
|
|
interface ProgressBarProps {
|
|
percent: number;
|
|
}
|
|
|
|
function getBarColor(percent: number): string {
|
|
if (percent >= PROGRESS_THRESHOLDS.danger) return "bg-red-500";
|
|
if (percent >= PROGRESS_THRESHOLDS.warning) return "bg-yellow-400";
|
|
return "bg-green-500";
|
|
}
|
|
|
|
export function ProgressBar({ percent }: ProgressBarProps) {
|
|
const clamped = Math.max(0, Math.min(100, percent));
|
|
return (
|
|
<View className="h-2.5 w-full rounded-full bg-neutral-200 dark:bg-neutral-700">
|
|
<View
|
|
className={`h-2.5 rounded-full ${getBarColor(clamped)}`}
|
|
style={{ width: `${clamped}%` }}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|