37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import { Text, View } from "react-native"
|
|
import { uploadProgressBarStyles as styles } from "@/src/styles/app-styles"
|
|
|
|
type Palette = {
|
|
accent: string
|
|
border: string
|
|
elevated: string
|
|
mutedText: string
|
|
text: string
|
|
}
|
|
|
|
type UploadProgressBarProps = {
|
|
progress: number
|
|
label?: string
|
|
palette: Palette
|
|
}
|
|
|
|
export default function UploadProgressBar({
|
|
progress,
|
|
label = "Uploading image...",
|
|
palette,
|
|
}: UploadProgressBarProps) {
|
|
const clampedProgress = Math.max(0, Math.min(100, progress))
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.header}>
|
|
<Text style={[styles.label, { color: palette.text }]}>{label}</Text>
|
|
<Text style={[styles.percentage, { color: palette.mutedText }]}>{clampedProgress}%</Text>
|
|
</View>
|
|
<View style={[styles.track, { borderColor: palette.border, backgroundColor: palette.elevated }]}>
|
|
<View style={[styles.fill, { width: `${clampedProgress}%`, backgroundColor: palette.accent }]} />
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|