feat: list habits basic UI
This commit is contained in:
parent
cc01c275ca
commit
39ebe3a152
@ -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 { SafeAreaView } from "react-native-safe-area-context"
|
||||||
|
|
||||||
import { useHabitsTracker } from "@/presentation/react/contexts/HabitsTracker"
|
import { useHabitsTracker } from "@/presentation/react/contexts/HabitsTracker"
|
||||||
|
import { colorsPresenter } from "@/presentation/presenters/utils/ColorsPresenter"
|
||||||
|
|
||||||
const HabitsPage: React.FC = () => {
|
const HabitsPage: React.FC = () => {
|
||||||
const { habitsTracker } = useHabitsTracker()
|
const { habitsTracker } = useHabitsTracker()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SafeAreaView style={styles.container}>
|
<SafeAreaView style={[styles.container]}>
|
||||||
{habitsTracker.habitsHistory.map((progressHistory) => {
|
<List.Section style={[styles.habitsList]}>
|
||||||
const { habit } = progressHistory
|
<FlatList
|
||||||
|
data={habitsTracker.habitsHistory}
|
||||||
|
renderItem={({ item }) => {
|
||||||
|
const { habit } = item
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View key={habit.id}>
|
<List.Item
|
||||||
<Text>
|
title={habit.name}
|
||||||
{habit.name} ({habit.goal.type})
|
style={[
|
||||||
</Text>
|
styles.habitItem,
|
||||||
</View>
|
{
|
||||||
)
|
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>
|
</SafeAreaView>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -27,7 +61,18 @@ const styles = StyleSheet.create({
|
|||||||
container: {
|
container: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "center",
|
},
|
||||||
|
habitsList: {
|
||||||
|
width: "90%",
|
||||||
|
},
|
||||||
|
habitItem: {
|
||||||
|
paddingVertical: 20,
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
marginVertical: 10,
|
||||||
|
borderRadius: 10,
|
||||||
|
},
|
||||||
|
habitItemIcon: {
|
||||||
|
width: 30,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
18
presentation/presenters/utils/ColorsPresenter.ts
Normal file
18
presentation/presenters/utils/ColorsPresenter.ts
Normal 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})`
|
||||||
|
},
|
||||||
|
}
|
Reference in New Issue
Block a user