feat: create exercise card component
This commit is contained in:
parent
4115e20b66
commit
4d3fd4d8d3
1 changed files with 35 additions and 0 deletions
35
src/components/ExerciseCard.tsx
Normal file
35
src/components/ExerciseCard.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue