From 498c955e4be15ce34ca2030ecc0339649f348300 Mon Sep 17 00:00:00 2001
From: Vinicius Souza <dev@viniciussouza.me>
Date: Fri, 25 Oct 2024 13:26:00 -0300
Subject: [PATCH] feat: add group list

---
 src/components/Group.tsx |  1 +
 src/screens/Home.tsx     | 32 ++++++++++++++++++++++++--------
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/components/Group.tsx b/src/components/Group.tsx
index cba0f29..ad1006e 100644
--- a/src/components/Group.tsx
+++ b/src/components/Group.tsx
@@ -22,6 +22,7 @@ export function Group({ name, isActive, ...others }: Props) {
           borderWidth: 1,
         }
       }}
+      mr="$3"
       {...others}
     >
       <Text
diff --git a/src/screens/Home.tsx b/src/screens/Home.tsx
index 8a5841f..09b9405 100644
--- a/src/screens/Home.tsx
+++ b/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 />
 
-      <Group
-        name="Costas"
-        isActive
+      <FlatList
+        data={groups}
+        keyExtractor={(item) => item as string}
+        renderItem={({ item }) => (
+          <Group
+            name={item as string}
+            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>
   )
 }