react_native/todo_app/app/(tabs)/home/index.js
2024-07-16 17:34:30 -05:00

51 lines
No EOL
2.3 KiB
JavaScript

import { Image, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { AntDesign } from '@expo/vector-icons';
const index = () => {
const todo = [
];
return (
<>
<View style={{marginHorizontal:20, marginVertical:20, alignItems: "center", flexDirection: "row", gap: 10}}>
<Pressable style={{backgroundColor: "#000000", paddingHorizontal:10, paddingVertical: 5, borderRadius:25, alignItems: "center", justifyContent: "center"}}>
<Text style={{color: "white", textAlign: "center"}}>All</Text>
</Pressable>
<Pressable style={{backgroundColor: "#000000", paddingHorizontal:10, paddingVertical: 5, borderRadius:25, alignItems: "center", justifyContent: "center"}}>
<Text style={{color: "white", textAlign: "center"}}>Work</Text>
</Pressable>
<Pressable style={{backgroundColor: "#000000", paddingHorizontal:10, paddingVertical: 5, borderRadius:25, alignItems: "center", justifyContent: "center", marginRight: "auto"}}>
<Text style={{color: "white", textAlign: "center"}}>Personal</Text>
</Pressable>
<Pressable>
<AntDesign name="plus" size={24} color="black" />
</Pressable>
</View>
<ScrollView style={{flex:1, backgroundColor: "white"}}>
<View style={{padding: 10}}>
{todo?.length > 0 ? (
<View></View>
) : (
<View style={{flex:1, justifyContent:"center", alignItems:"center", marginTop:150, marginLeft:"auto", marginRight:"auto"}}>
<Image
style={{width: 100, height: 100, resizeMode: "containe"}}
source={{
uri:"./assets/images/to-do.png",
}}
/>
<Text style={{fontSize:16, fontWeight:600, marginTop: 20, textAlign:"center"}}>Hooray! No task for today</Text>
<Pressable style={{backgroundColor: "black", marginTop: 20, padding:5, borderRadius: 5}}>
<Text style={{fontSize:16, fontWeight:600, textAlign:"center", color: "white"}}>Add task <AntDesign name="plus" size={16} color="white" /></Text>
</Pressable>
</View>
)}
</View>
</ScrollView>
</>
)
}
export default index
const styles = StyleSheet.create({})