finished assignment 3 - 100%

FastNotes/components/upload-progress-bar.tsx

@@ -0,0 +1,36 @@
+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>
+    )
+}