feat: list habits basic UI

app/application/habits/index.tsx

@@ -1,24 +1,58 @@
-import { StyleSheet, Text, View } from "react-native"
+import FontAwesome6 from "@expo/vector-icons/FontAwesome6"
+import { FlatList, StyleSheet } from "react-native"
+import { List } from "react-native-paper"
 import { SafeAreaView } from "react-native-safe-area-context"
 
 import { useHabitsTracker } from "@/presentation/react/contexts/HabitsTracker"
+import { colorsPresenter } from "@/presentation/presenters/utils/ColorsPresenter"
 
 const HabitsPage: React.FC = () => {
   const { habitsTracker } = useHabitsTracker()
 
   return (
-    <SafeAreaView style={styles.container}>
-      {habitsTracker.habitsHistory.map((progressHistory) => {
-        const { habit } = progressHistory
+    <SafeAreaView style={[styles.container]}>
+      <List.Section style={[styles.habitsList]}>
+        <FlatList
+          data={habitsTracker.habitsHistory}
+          renderItem={({ item }) => {
+            const { habit } = item
 
             return (
-          <View key={habit.id}>
-            <Text>
-              {habit.name} ({habit.goal.type})
-            </Text>
-          </View>
+              <List.Item
+                title={habit.name}
+                style={[
+                  styles.habitItem,
+                  {
+                    backgroundColor: colorsPresenter.hexToRgbA(
+                      habit.color,
+                      0.4,
+                    ),
+                  },
+                ]}
+                contentStyle={[
+                  {
+                    paddingLeft: 12,
+                  },
+                ]}
+                titleStyle={[
+                  {
+                    fontSize: 18,
+                  },
+                ]}
+                left={() => {
+                  return (
+                    <FontAwesome6
+                      size={24}
+                      name={habit.icon}
+                      style={[styles.habitItemIcon]}
+                    />
                   )
-      })}
+                }}
+              />
+            )
+          }}
+        />
+      </List.Section>
     </SafeAreaView>
   )
 }
@@ -27,7 +61,18 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: "center",
-    justifyContent: "center",
+  },
+  habitsList: {
+    width: "90%",
+  },
+  habitItem: {
+    paddingVertical: 20,
+    paddingHorizontal: 10,
+    marginVertical: 10,
+    borderRadius: 10,
+  },
+  habitItemIcon: {
+    width: 30,
   },
 })
 

presentation/presenters/utils/ColorsPresenter.ts

@@ -0,0 +1,18 @@
+export const colorsPresenter = {
+  hexToRgbA: (hexColor: string, opacity: number): string => {
+    let hex = hexColor.replace("#", "")
+    if (hex.length === 3) {
+      hex = hex
+        .split("")
+        .map((char) => {
+          return char + char
+        })
+        .join("")
+    }
+    const color = Number.parseInt(hex, 16)
+    const red = (color >> 16) & 255
+    const green = (color >> 8) & 255
+    const blue = color & 255
+    return `rgba(${red}, ${green}, ${blue}, ${opacity})`
+  },
+}