feat: create group component

src/components/Group.tsx

@@ -0,0 +1,37 @@
+import { Button, Text } from "@gluestack-ui/themed";
+import { ComponentProps } from "react"
+
+type Props = ComponentProps<typeof Button> & {
+  name: string,
+  isActive: boolean,
+}
+
+export function Group({ name, isActive, ...others }: Props) {
+  return (
+    <Button
+      minWidth="$24"
+      h="$10"
+      bg="$gray600"
+      rounded="$md"
+      justifyContent="center"
+      alignItems="center"
+      borderColor="$green500"
+      borderWidth={isActive ? 1 : 0}
+      sx={{
+        ":active": {
+          borderWidth: 1,
+        }
+      }}
+      {...others}
+    >
+      <Text
+        color={isActive ? "$green500" : "$gray200"}
+        fontSize="$xs"
+        textTransform="uppercase"
+        fontFamily="$heading"
+      >
+        {name}
+      </Text>
+    </Button>
+  )
+}

src/screens/Home.tsx

@@ -1,10 +1,21 @@
 import { HomeHeader } from "@components/HomeHeader";
+import { Group } from "@components/Group";
 import { VStack } from "@gluestack-ui/themed";
 
 export function Home() {
   return (
     <VStack flex={1}>
       <HomeHeader />
+
+      <Group
+        name="Costas"
+        isActive
+      />
+
+      <Group
+        name="Peito"
+        isActive={false}
+      />
     </VStack>
   )
 }