Upgrade view Workout ✨

components/LinearProgressBar.tsx

@@ -36,7 +36,7 @@ export default function LinearProgressBar({ duration = 10 }) {
 
     return (
         <View className="w-full p-4 items-center">
-            <Text className="text-center mb-2">Temps restant : {timeLeft}s</Text>
+            <Text className="text-center mb-2 color-white font-extrabold">Temps restant : {timeLeft}s</Text>
             <View className="w-full h-4 bg-gray-200 rounded-full overflow-hidden mb-4">
                 <Animated.View
                     style={{ width: progressWidth }}
@@ -51,6 +51,7 @@ export default function LinearProgressBar({ duration = 10 }) {
             >
                 <Text className="text-white font-bold">
                     {isRunning ? 'En cours...' : 'Play'}
+
                 </Text>
             </TouchableOpacity>
         </View>

components/WorkoutPresentationComponent.tsx

@@ -1,28 +1,48 @@
-import {ImageBackground, TouchableOpacity, View} from "react-native";
+import {ImageBackground, TouchableOpacity, View, Text} from "react-native";
 import Screen from "@/components/ui/Screen";
 import * as React from "react";
 import {Ionicons} from "@expo/vector-icons";
 import {useRouter} from "expo-router";
 import LinearProgressBar from "@/components/LinearProgressBar";
+import {Workout} from "@/model/Workout";
+import {LinearGradient} from "expo-linear-gradient";
+import WelcomeComponent from "@/components/WelcomeComponent";
+import HeaderProfileComponent from "@/components/HeaderProfileComponent";
 
-export default function WorkoutPresentationComponent() {
+export default function WorkoutPresentationComponent(workout: Workout, dataExercise: any) {
     const router = useRouter()
     return (
         <ImageBackground className="h-full w-full"
-                         source={require("assets/images/sigmaC.jpeg")}>
+                         source={require("assets/images/backgroundWourkout.jpg")}>
             <Screen>
-                <View>
-                    <TouchableOpacity
-                                      onPress={() => {
-                                          router.replace("/ExercicesScreen");
-                                      }}>
+                <View className="flex-col h-full justify-between">
+
+                    {/* Bouton Retour */}
+                    <View className="mt-5 ml-5">
+                        <TouchableOpacity onPress={() => { router.replace("/ExercicesScreen"); }}>
                             <Ionicons name="chevron-back-circle-outline" size={50} color="white"/>
                         </TouchableOpacity>
                     </View>
 
-                <LinearProgressBar duration={12}/>
-            </Screen>
+                    {/* Permet de pousser le reste du contenu vers le bas */}
+                    <View className="flex-grow" />
 
+                    {/* Texte en bas */}
+                    <View className="items-center mb-10">
+                        <Text className="text-white bg-transparent border-2 border-white px-3 py-1 rounded-full text-2xl font-bold">
+                            Exercise 1
+                        </Text>
+                        <Text className="text-white text-4xl font-bold mt-2">Back Warmup</Text>
+                    </View>
+
+                    {/* Barre de progression */}
+                    <View className="mb-5">
+                        <LinearProgressBar duration={12} />
+                    </View>
+
+                </View>
+
+            </Screen>
         </ImageBackground>
-    )
+    );
 }