101 lines
3.2 KiB
TypeScript
101 lines
3.2 KiB
TypeScript
|
import { useRouter } from "expo-router";
|
||
|
|
import { useState } from "react";
|
||
|
|
import {
|
||
|
|
ImageBackground,
|
||
|
|
KeyboardAvoidingView,
|
||
|
|
Platform,
|
||
|
|
ScrollView,
|
||
|
|
Text,
|
||
|
|
TextInput,
|
||
|
|
TouchableOpacity,
|
||
|
|
View
|
||
|
|
} from "react-native";
|
||
|
|
import { SafeAreaView } from "react-native-safe-area-context";
|
||
|
|
import { styles } from "./styles";
|
||
|
|
|
||
|
|
const converterBgImage = require("../assets/images/todo.png");
|
||
|
|
|
||
|
|
export default function CoordinateConverter() {
|
||
|
|
const router = useRouter();
|
||
|
|
const [todos, setTodos] = useState<string[]>([]);
|
||
|
|
const [newTodo, setNewTodo] = useState<string>("");
|
||
|
|
|
||
|
|
const addTodo = () => {
|
||
|
|
if (newTodo.trim().length > 0) {
|
||
|
|
setTodos([...todos, newTodo.trim()]);
|
||
|
|
setNewTodo("");
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const removeTodo = (index: number) => {
|
||
|
|
const updatedTodos = todos.filter((_, i) => i !== index);
|
||
|
|
setTodos(updatedTodos);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<View style={styles.converterScreenRoot}>
|
||
|
|
<ImageBackground
|
||
|
|
source={converterBgImage}
|
||
|
|
style={styles.converterBackgroundImage}
|
||
|
|
resizeMode="cover"
|
||
|
|
>
|
||
|
|
<View style={styles.converterBackgroundOverlay} />
|
||
|
|
</ImageBackground>
|
||
|
|
|
||
|
|
<SafeAreaView style={styles.converterContentWrapper}>
|
||
|
|
<KeyboardAvoidingView
|
||
|
|
style={styles.converterContainer}
|
||
|
|
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
||
|
|
>
|
||
|
|
<ScrollView contentContainerStyle={styles.converterScrollContent}>
|
||
|
|
{/* Custom Back Button */}
|
||
|
|
<TouchableOpacity
|
||
|
|
onPress={() => router.back()}
|
||
|
|
style={styles.backButton}
|
||
|
|
>
|
||
|
|
<Text style={styles.backButtonText}>← Go Back</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
|
||
|
|
<Text style={styles.converterTitle}>Todo List</Text>
|
||
|
|
|
||
|
|
{/* Todo Input Section */}
|
||
|
|
<View style={styles.todoInputContainer}>
|
||
|
|
<TextInput
|
||
|
|
style={styles.todoInputField}
|
||
|
|
placeholder="Add a new todo..."
|
||
|
|
placeholderTextColor="#666"
|
||
|
|
value={newTodo}
|
||
|
|
onChangeText={setNewTodo}
|
||
|
|
onSubmitEditing={addTodo}
|
||
|
|
/>
|
||
|
|
<TouchableOpacity onPress={addTodo} style={styles.addTodoButton}>
|
||
|
|
<Text style={styles.addTodoButtonText}>Add</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
{/* Todo List Display */}
|
||
|
|
<View style={styles.todoListContainer}>
|
||
|
|
{todos.length === 0 ? (
|
||
|
|
<Text style={styles.placeholderText}>
|
||
|
|
Your todo list is empty. Add some tasks!
|
||
|
|
</Text>
|
||
|
|
) : (
|
||
|
|
todos.map((todo, index) => (
|
||
|
|
<View key={index} style={styles.todoItem}>
|
||
|
|
<Text style={styles.todoText}>{todo}</Text>
|
||
|
|
<TouchableOpacity
|
||
|
|
onPress={() => removeTodo(index)}
|
||
|
|
style={styles.removeTodoButton}
|
||
|
|
>
|
||
|
|
<Text style={styles.removeTodoButtonText}>X</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
))
|
||
|
|
)}
|
||
|
|
</View>
|
||
|
|
</ScrollView>
|
||
|
|
</KeyboardAvoidingView>
|
||
|
|
</SafeAreaView>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
}
|