1
1
mirror of https://github.com/theoludwig/p61-project.git synced 2024-07-17 07:00:12 +02:00

feat: list habits basic UI

This commit is contained in:
Théo LUDWIG 2024-03-24 19:39:15 +01:00
parent cc01c275ca
commit 39ebe3a152
Signed by: theoludwig
GPG Key ID: ADFE5A563D718F3B
2 changed files with 76 additions and 13 deletions

View File

@ -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,
},
})

View File

@ -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})`
},
}