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