pull/13/head
Anthony RICHARD
parent
1f8a05d1da
commit
98c2bd72a2
@ -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 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 {
|
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,
|
||||||
const style = () => {
|
}: WorkoutCardComponentProps) {
|
||||||
return `rounded-2xl overflow-hidden ${background ?? "bg-black"}`
|
const style = () => {
|
||||||
}
|
return `rounded-2xl overflow-hidden ${background ?? "bg-black"}`;
|
||||||
|
};
|
||||||
const styleImage = () => {
|
|
||||||
return `w-full h-full `
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(styleImage())
|
const styleImage = () => {
|
||||||
|
return `w-full h-full `;
|
||||||
|
};
|
||||||
|
|
||||||
console.log(style())
|
console.log(styleImage());
|
||||||
|
|
||||||
return (
|
console.log(style());
|
||||||
<View className={style()}>
|
|
||||||
|
|
||||||
|
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>
|
||||||
|
|
||||||
<ImageBackground
|
<View className="absolute bottom-0 left-0 right-0 p-4 bg-opacity-50">
|
||||||
source={require("assets/images/Sigma-2.png")}
|
<Text className="text-white text-lg font-bold">{exercise.name}</Text>
|
||||||
className='h-full w-full'
|
<Text className="text-gray-300 text-sm">{exercise.repetitions}</Text>
|
||||||
>
|
<View className="flex-row items-center mt-2">
|
||||||
<View className="flex-row justify-between p-4">
|
<Text className="text-white text-xs bg-gray-800 py-1 px-3 rounded-full">
|
||||||
<View className="flex-row space-x-4 h-44 items-top justify-center ">
|
{exercise.level}
|
||||||
<View className="flex-row items-top">
|
</Text>
|
||||||
<Text className="text-white text-sm ml-1">{exercise.duration} min</Text>
|
</View>
|
||||||
</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>
|
</View>
|
||||||
);
|
|
||||||
|
<TouchableOpacity className="absolute bottom-2 right-4 p-4 rounded-full">
|
||||||
|
<AntDesign name="play" size={50} color="orange" />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</ImageBackground>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
Loading…
Reference in new issue