You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.9 KiB
52 lines
1.9 KiB
import TodoList from "@/components/TodoList";
|
|
import { Button, ButtonText } from "@/components/ui/button";
|
|
import { GS } from "@/components/ui/gluestack-ui-provider/gluestack-ui-token";
|
|
import { HStack } from "@/components/ui/hstack";
|
|
import { Input, InputField } from "@/components/ui/input";
|
|
import { Text } from "@/components/ui/text";
|
|
import { VStack } from "@/components/ui/vstack";
|
|
import { useTodosCtx } from "@/store/todoProvider";
|
|
import { useState } from "react";
|
|
import { KeyboardAvoidingView, Platform } from "react-native";
|
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
|
|
export default function ActiveTab() {
|
|
const { activeTodos, leftCount, add, toggle, completeAll } = useTodosCtx();
|
|
const [title, setTitle] = useState("");
|
|
|
|
const onAdd = () => {
|
|
add(title);
|
|
setTitle("");
|
|
};
|
|
|
|
return (
|
|
<SafeAreaView style={{ flex: 1 }} className="bg-white dark:bg-neutral-900">
|
|
<KeyboardAvoidingView
|
|
style={{ flex: 1 }}
|
|
behavior={Platform.OS === "ios" ? "padding" : "height"}
|
|
keyboardVerticalOffset={30}
|
|
>
|
|
<VStack className="flex-1 px-4 py-1 gap-3">
|
|
<Text className="text-2xl font-bold">할일</Text>
|
|
{/* 확인 창 */}
|
|
<TodoList data={activeTodos} onToggle={toggle} />
|
|
{/* 입력 창 */}
|
|
<HStack className="gap-2">
|
|
<Input className="flex-1">
|
|
<InputField
|
|
value={title}
|
|
onChangeText={setTitle}
|
|
placeholder="할 일을 입력하세요"
|
|
returnKeyType="done"
|
|
onSubmitEditing={onAdd}
|
|
/>
|
|
</Input>
|
|
<Button action={GS.action.primary} onPress={onAdd}>
|
|
<ButtonText>추가</ButtonText>
|
|
</Button>
|
|
</HStack>
|
|
</VStack>
|
|
</KeyboardAvoidingView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|