feat: add group list

src/components/Group.tsx

@@ -22,6 +22,7 @@ export function Group({ name, isActive, ...others }: Props) {
           borderWidth: 1,
         }
       }}
+      mr="$3"
       {...others}
     >
       <Text

src/screens/Home.tsx

@@ -1,21 +1,37 @@
+import { useState } from "react";
+import { FlatList, HStack, VStack } from "@gluestack-ui/themed";
+
 import { HomeHeader } from "@components/HomeHeader";
 import { Group } from "@components/Group";
-import { VStack } from "@gluestack-ui/themed";
 
 export function Home() {
+  const [groups, setGroups] = useState<string[]>(['costas', 'bíceps', 'tríceps', 'ombro', 'peito', 'pernas'])
+  const [selectedGroup, setSelectedGroup] = useState("costas");
+
   return (
     <VStack flex={1}>
       <HomeHeader />
 
+      <FlatList
+        data={groups}
+        keyExtractor={(item) => item as string}
+        renderItem={({ item }) => (
           <Group
-        name="Costas"
+            name={item as string}
-        isActive
+            isActive={selectedGroup === item}
+            onPress={() => setSelectedGroup(item as string)}
+          />
+        )}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ marginHorizontal: 32 }}
+        style={{
+          marginVertical: 40,
+          maxHeight: 44,
+          minHeight: 44,
+        }}
       />
 
-      <Group
-        name="Peito"
-        isActive={false}
-      />
     </VStack>
   )
 }