Optifit
/
Mobile
5
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

✨

Browse Source
pull/13/head
Tony Fages 5 months ago committed by Anthony RICHARD
parent 1f8a05d1da
commit 98c2bd72a2
1 changed files with 62 additions and 57 deletions
Show Stats Download Patch File Download Diff File

119
components/WorkoutCardComponent.tsx
Unescape View File

@ -1,68 +1,73 @@
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 {Workout} from "@/model/Workout";
import { ImageBackground, Text, TouchableOpacity, View } from "react-native";
interface WorkoutCardComponentProps {
exercise: Workout,
background?: String,
height?: number,
exercise: Workout;
background?: String;
height?: number;
}
export default function WorkoutCardComponent({exercise, height, background}: WorkoutCardComponentProps) {
const style = () => {
return `rounded-2xl overflow-hidden ${background ?? "bg-black"}`
}
const styleImage = () => {
return `w-full h-full `
}
console.log(styleImage())
export default function WorkoutCardComponent({
exercise,
height,
background,
}: WorkoutCardComponentProps) {
const style = () => {
return `rounded-2xl overflow-hidden ${background ?? "bg-black"}`;
};
console.log(style())
const styleImage = () => {
return `w-full h-full `;
};
return (
<View className={style()}>
console.log(styleImage());
console.log(style());
<ImageBackground
source={require("assets/images/Sigma-2.png")}
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>
</View>
<View className="flex-row justify-center">
<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>
</View>
</View>
</View>
<View className="absolute bottom-0 left-0 right-0 p-4 bg-opacity-50">
<Text className="text-white text-lg font-bold">{exercise.name}</Text>
<Text className="text-gray-300 text-sm">{exercise.repetitions}</Text>
<View className="flex-row items-center mt-2">
<Text className="text-white text-xs bg-gray-800 py-1 px-3 rounded-full">
{exercise.level}
</Text>
</View>
</View>
<TouchableOpacity className="absolute bottom-2 right-4 p-4 rounded-full">
<AntDesign name="play" size={50} color="orange"/>
</TouchableOpacity>
</ImageBackground>
return (
<View className={style()}>
<ImageBackground
source={require("assets/images/Sigma-2.png")}
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>
</View>
<View className="flex-row justify-center">
<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>
</View>
</View>
</View>
<View className="absolute bottom-0 left-0 right-0 p-4 bg-opacity-50">
<Text className="text-white text-lg font-bold">{exercise.name}</Text>
<Text className="text-gray-300 text-sm">{exercise.repetitions}</Text>
<View className="flex-row items-center mt-2">
<Text className="text-white text-xs bg-gray-800 py-1 px-3 rounded-full">
{exercise.level}
</Text>
</View>
</View>
);
}
<TouchableOpacity className="absolute bottom-2 right-4 p-4 rounded-full">
<AntDesign name="play" size={50} color="orange" />
</TouchableOpacity>
</ImageBackground>
</View>
);
}

Write Preview
Loading…
Cancel
Save