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

80 lines
2.0 KiB
TypeScript
Raw Normal View History

2024-03-24 19:39:15 +01:00
import FontAwesome6 from "@expo/vector-icons/FontAwesome6"
import { FlatList, StyleSheet } from "react-native"
import { List } from "react-native-paper"
2024-03-15 23:24:08 +01:00
import { SafeAreaView } from "react-native-safe-area-context"
2024-03-16 00:36:44 +01:00
import { useHabitsTracker } from "@/presentation/react/contexts/HabitsTracker"
2024-03-24 19:39:15 +01:00
import { colorsPresenter } from "@/presentation/presenters/utils/ColorsPresenter"
2024-03-15 23:24:08 +01:00
const HabitsPage: React.FC = () => {
2024-03-16 00:36:44 +01:00
const { habitsTracker } = useHabitsTracker()
2024-03-15 23:24:08 +01:00
return (
2024-03-24 19:39:15 +01:00
<SafeAreaView style={[styles.container]}>
<List.Section style={[styles.habitsList]}>
<FlatList
data={habitsTracker.habitsHistory}
renderItem={({ item }) => {
const { habit } = item
2024-03-15 23:24:08 +01:00
2024-03-24 19:39:15 +01:00
return (
<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>
2024-03-15 23:24:08 +01:00
</SafeAreaView>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
2024-03-24 19:39:15 +01:00
},
habitsList: {
width: "90%",
},
habitItem: {
paddingVertical: 20,
paddingHorizontal: 10,
marginVertical: 10,
borderRadius: 10,
},
habitItemIcon: {
width: 30,
2024-03-15 23:24:08 +01:00
},
})
export default HabitsPage