You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Mobile/components/ExerciceOverview.tsx

43 lines
1.3 KiB

import React from "react";
import { Text } from "./ui/text";
import { Box } from "./ui/box";
import { ImageBackground } from "react-native";
import { HStack } from "@/components/ui/hstack";
import { Button } from "@/components/ui/Button";
import { AntDesign } from "@expo/vector-icons";
export default function ExerciceOverview() {
const exercise = {
name: "Jumping Jacks",
time: "00:30",
kcal: 5,
sets: 3,
difficulty: "Medium",
imageUri: "https://random-image-pepebigotes.vercel.app/api/random-image",
};
const image = { uri: exercise.imageUri };
return (
<Box className="h-1/4">
<ImageBackground source={image} imageStyle={{ borderRadius: 15 }}>
<HStack>
<Text className="font-extrabold text-black">{exercise.time}</Text>
<Text className="text-black">{exercise.kcal} kcal</Text>
</HStack>
<HStack>
<Box className="flex-1 items-start">
<Text className="text-black">{exercise.name}</Text>
<Text className="text-black">{exercise.sets} Sets</Text>
<Text className="text-black">{exercise.difficulty} Difficulty</Text>
</Box>
<Button className="bg-transparent items-end ">
<AntDesign name="play" size={24} />
</Button>
</HStack>
</ImageBackground>
</Box>
);
}