✨

components/WorkoutCardComponent.tsx

@@ -1,49 +1,55 @@
-import {ImageBackground, Text, TouchableOpacity, View} from "react-native";
+import { Workout } from "@/model/Workout";
+import { AntDesign, MaterialCommunityIcons } from "@expo/vector-icons";
 import React from "react";
-import {AntDesign, MaterialCommunityIcons} from "@expo/vector-icons";
+import { ImageBackground, Text, TouchableOpacity, View } from "react-native";
-import {Workout} from "@/model/Workout";
 
 interface WorkoutCardComponentProps {
-    exercise: Workout,
+  exercise: Workout;
-    background?: String,
+  background?: String;
-    height?: number,
+  height?: number;
-
 }
 
-export default function WorkoutCardComponent({exercise, height, background}: WorkoutCardComponentProps) {
+export default function WorkoutCardComponent({
-
+  exercise,
-
+  height,
-
+  background,
+}: WorkoutCardComponentProps) {
   const style = () => {
-        return `rounded-2xl overflow-hidden ${background ?? "bg-black"}`
+    return `rounded-2xl overflow-hidden ${background ?? "bg-black"}`;
-    }
+  };
 
   const styleImage = () => {
-        return `w-full h-full `
+    return `w-full h-full `;
-    }
+  };
 
-    console.log(styleImage())
+  console.log(styleImage());
 
-    console.log(style())
+  console.log(style());
 
   return (
     <View className={style()}>
-
-
       <ImageBackground
         source={require("assets/images/Sigma-2.png")}
-                    className='h-full w-full'
+        className="h-full w-full"
       >
         <View className="flex-row justify-between p-4">
           <View className="flex-row space-x-4 h-44  items-top justify-center ">
             <View className="flex-row items-top">
-                                <Text className="text-white text-sm ml-1">{exercise.duration} min</Text>
+              <Text className="text-white text-sm ml-1">
+                {exercise.duration} min
+              </Text>
             </View>
             <View className="flex-row justify-center">
-                                <MaterialCommunityIcons name="square-rounded" size={8} color="white"/>
+              <MaterialCommunityIcons
+                name="square-rounded"
+                size={8}
+                color="white"
+              />
             </View>
             <View className="flex-row">
-                                <Text className="text-white text-sm ml-1">{exercise.calories} kcal</Text>
+              <Text className="text-white text-sm ml-1">
+                {exercise.calories} kcal
+              </Text>
             </View>
           </View>
         </View>
@@ -59,10 +65,9 @@ export default function WorkoutCardComponent({exercise, height, background}: Wor
         </View>
 
         <TouchableOpacity className="absolute bottom-2 right-4 p-4 rounded-full">
-                        <AntDesign name="play" size={50} color="orange"/>
+          <AntDesign name="play" size={50} color="orange" />
         </TouchableOpacity>
       </ImageBackground>
-
     </View>
   );
 }