feat: add navigation to exercise details screen

src/screens/Home.tsx

@@ -1,16 +1,24 @@
 import { useState } from 'react';
 import { FlatList } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
 import { Heading, HStack, Text, VStack } from '@gluestack-ui/themed';
 
 import { HomeHeader } from '@components/HomeHeader';
 import { Group } from '@components/Group';
 import { ExerciseCard } from '@components/ExerciseCard';
+import { AppNavigatorRoutesProps } from '@routes/app.routes';
 
 export function Home() {
   const [exercises] = useState<string[]>(['1', '2', '3', '4', '5', '6']);
   const [groups] = useState<string[]>(['costas', 'bíceps', 'tríceps', 'ombro', 'peito', 'pernas']);
   const [selectedGroup, setSelectedGroup] = useState('costas');
 
+  const navigation = useNavigation<AppNavigatorRoutesProps>();
+
+  function handleOpenExerciseDetails() {
+    navigation.navigate('Exercise');
+  }
+
   return (
     <VStack flex={1}>
       <HomeHeader />
@@ -49,7 +57,9 @@ export function Home() {
         <FlatList
           data={exercises}
           keyExtractor={(item) => item}
-          renderItem={({ item }) => <ExerciseCard name={item} />}
+          renderItem={({ item }) => (
+            <ExerciseCard name={item} onPress={handleOpenExerciseDetails} />
+          )}
           showsVerticalScrollIndicator={false}
           contentContainerStyle={{ paddingBottom: 20 }}
         />