feat: create exercise card component

This commit is contained in:
Vinicius Souza 2024-10-25 14:58:27 -03:00
parent 4115e20b66
commit 4d3fd4d8d3

View file

@ -0,0 +1,35 @@
import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
import { Heading, HStack, Icon, Image, Text, VStack } from '@gluestack-ui/themed';
import { ChevronRight } from 'lucide-react-native';
type Props = TouchableOpacityProps;
export function ExerciseCard({ ...others }: Props) {
return (
<TouchableOpacity {...others}>
<HStack bg="$gray500" alignItems="center" p="$2" pr="$4" rounded="$md" mb="$3">
<Image
source={{ uri: 'https://i.pravatar.cc/200' }}
alt="imagem do exercício"
h="$16"
w="$16"
rounded="$md"
mr="$4"
resizeMode="cover"
/>
<VStack flex={1}>
<Heading color="white" fontSize="$lg">
Puxada Frontal
</Heading>
<Text fontSize="$sm" color="$gray200" mt="$1" numberOfLines={2}>
3 séries de 12 repetições with a really big line
</Text>
</VStack>
<Icon as={ChevronRight} color="$gray300" />
</HStack>
</TouchableOpacity>
);
}