diff --git a/lite.todo/app/(tabs)/_layout.tsx b/lite.todo/app/(tabs)/_layout.tsx
index 1045818..39629d1 100755
--- a/lite.todo/app/(tabs)/_layout.tsx
+++ b/lite.todo/app/(tabs)/_layout.tsx
@@ -1,41 +1,45 @@
import { Tabs } from "expo-router";
import { MaterialIcons } from "@expo/vector-icons";
+import { TodosProvider } from "@/store/todoProvider";
export default function TabLayout() {
return (
-
- (
-
- ),
+
+
- (
-
- ),
- }}
- />
-
+ >
+ (
+
+ ),
+ }}
+ />
+ (
+
+ ),
+ }}
+ />
+
+
);
}
diff --git a/lite.todo/app/(tabs)/done.tsx b/lite.todo/app/(tabs)/done.tsx
index 9271cb2..5417039 100755
--- a/lite.todo/app/(tabs)/done.tsx
+++ b/lite.todo/app/(tabs)/done.tsx
@@ -1,5 +1,31 @@
+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 { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { useTodosCtx } from "@/store/todoProvider";
import { SafeAreaView } from "react-native-safe-area-context";
export default function DoneTab() {
- return ;
+ const { doneTodos, toggle, remove, clearDone } = useTodosCtx();
+
+ return (
+
+
+ 완료한 일
+
+
+
+
+
+
+ );
}
diff --git a/lite.todo/app/(tabs)/index.tsx b/lite.todo/app/(tabs)/index.tsx
index 94a9244..526bc58 100755
--- a/lite.todo/app/(tabs)/index.tsx
+++ b/lite.todo/app/(tabs)/index.tsx
@@ -1,11 +1,17 @@
+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 { useTodos } from "@/store/useTodos";
+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 } = useTodos();
+ const { activeTodos, leftCount, add, toggle, completeAll } = useTodosCtx();
const [title, setTitle] = useState("");
const onAdd = () => {
@@ -14,10 +20,33 @@ export default function ActiveTab() {
};
return (
-
-
- 할일
-
+
+
+
+ 할일
+ {/* 확인 창 */}
+
+ {/* 입력 창 */}
+
+
+
+
+
+
+
+
);
}
diff --git a/lite.todo/app/_layout.tsx b/lite.todo/app/_layout.tsx
index 73aae1c..6dd8451 100755
--- a/lite.todo/app/_layout.tsx
+++ b/lite.todo/app/_layout.tsx
@@ -11,7 +11,7 @@ export default function App() {
-
+ null }} />
);
diff --git a/lite.todo/components/TodoList.tsx b/lite.todo/components/TodoList.tsx
index 2c9dffc..76f6407 100755
--- a/lite.todo/components/TodoList.tsx
+++ b/lite.todo/components/TodoList.tsx
@@ -11,6 +11,7 @@ import {
} from "./ui/checkbox";
import { Button, ButtonText } from "./ui/button";
import { GS } from "./ui/gluestack-ui-provider/gluestack-ui-token";
+import { CheckIcon, CloseIcon, Icon } from "@/components/ui/icon";
type Props = {
data: Todo[];
@@ -24,31 +25,41 @@ export default function TodoList({ data, onToggle, onRemove }: Props) {
data={data}
keyExtractor={(it) => it.id}
contentContainerStyle={{ paddingBottom: 80 }}
- renderItem={({ item }) => (
-
- onToggle(item.id)}
- value={item.title}
- >
-
-
-
-
- {item.title}
-
-
- {onRemove ? (
-
- ) : null}
-
- )}
+
+
+
+
+ {item.title}
+
+
+ {onRemove ? (
+
+ ) : null}
+
+ );
+ }}
ListEmptyComponent={
할 일이 없습니다.
diff --git a/lite.todo/components/ui/icon/index.tsx b/lite.todo/components/ui/icon/index.tsx
new file mode 100755
index 0000000..3d9ef61
--- /dev/null
+++ b/lite.todo/components/ui/icon/index.tsx
@@ -0,0 +1,1600 @@
+import React from 'react';
+import { createIcon } from '@gluestack-ui/core/icon/creator';
+import { Path } from 'react-native-svg';
+import { tva } from '@gluestack-ui/utils/nativewind-utils';
+import { cssInterop } from 'nativewind';
+import { VariantProps } from '@gluestack-ui/utils/nativewind-utils';
+import {
+ PrimitiveIcon,
+ IPrimitiveIcon,
+ Svg,
+} from '@gluestack-ui/core/icon/creator';
+
+export const UIIcon = createIcon({
+ Root: PrimitiveIcon,
+}) as React.ForwardRefExoticComponent<
+ React.ComponentPropsWithoutRef &
+ React.RefAttributes>
+>;
+
+const iconStyle = tva({
+ base: 'text-typography-950 fill-none stroke-current pointer-events-none',
+ variants: {
+ size: {
+ '2xs': 'h-3 w-3',
+ 'xs': 'h-3.5 w-3.5',
+ 'sm': 'h-4 w-4',
+ 'md': 'h-[18px] w-[18px]',
+ 'lg': 'h-5 w-5',
+ 'xl': 'h-6 w-6',
+ },
+ },
+});
+
+cssInterop(UIIcon, {
+ className: {
+ target: 'style',
+ nativeStyleToProp: {
+ height: true,
+ width: true,
+ fill: true,
+ color: true,
+ stroke: true,
+ },
+ },
+});
+
+type IIConProps = IPrimitiveIcon &
+ VariantProps &
+ React.ComponentPropsWithoutRef;
+
+const Icon = React.forwardRef, IIConProps>(
+ function Icon({ size = 'md', className, ...props }, ref) {
+ const iconProps = {
+ fill: 'none',
+ stroke: 'currentColor',
+ ...props,
+ };
+
+ if (typeof size === 'number') {
+ return (
+
+ );
+ } else if (
+ (props.height !== undefined || props.width !== undefined) &&
+ size === undefined
+ ) {
+ return (
+
+ );
+ }
+ return (
+
+ );
+ }
+);
+
+export { Icon };
+
+type ParameterTypes = Omit[0], 'Root'>;
+
+const createIconUI = ({ ...props }: ParameterTypes) => {
+ const UIIconCreateIcon = createIcon({
+ Root: Svg,
+ ...props,
+ }) as React.ForwardRefExoticComponent<
+ React.ComponentPropsWithoutRef &
+ React.RefAttributes>
+ >;
+
+ return React.forwardRef>(function UIIcon(
+ {
+ className,
+ size,
+ ...inComingProps
+ }: VariantProps &
+ React.ComponentPropsWithoutRef,
+ ref
+ ) {
+ const iconProps = {
+ fill: 'none',
+ stroke: 'currentColor',
+ ...inComingProps,
+ };
+
+ return (
+
+ );
+ });
+};
+export { createIconUI as createIcon };
+// All Icons
+const AddIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+AddIcon.displayName = 'AddIcon';
+export { AddIcon };
+
+const AlertCircleIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+ ),
+});
+
+AlertCircleIcon.displayName = 'AlertCircleIcon';
+export { AlertCircleIcon };
+
+const ArrowUpIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+const ArrowDownIcon = createIcon({
+ Root: Svg,
+
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+const ArrowRightIcon = createIcon({
+ Root: Svg,
+
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+const ArrowLeftIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+ArrowUpIcon.displayName = 'ArrowUpIcon';
+ArrowDownIcon.displayName = 'ArrowDownIcon';
+ArrowRightIcon.displayName = 'ArrowRightIcon';
+ArrowLeftIcon.displayName = 'ArrowLeftIcon';
+
+export { ArrowUpIcon, ArrowDownIcon, ArrowRightIcon, ArrowLeftIcon };
+
+const AtSignIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+ <>
+
+
+
+
+ ),
+});
+
+AtSignIcon.displayName = 'AtSignIcon';
+
+export { AtSignIcon };
+
+const BellIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+BellIcon.displayName = 'BellIcon';
+
+export { BellIcon };
+
+const CalendarDaysIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ ),
+});
+
+CalendarDaysIcon.displayName = 'CalendarDaysIcon';
+
+export { CalendarDaysIcon };
+
+const CheckIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+ ),
+});
+
+const CheckCircleIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+CheckIcon.displayName = 'CheckIcon';
+CheckCircleIcon.displayName = 'CheckCircleIcon';
+
+export { CheckIcon, CheckCircleIcon };
+
+const ChevronUpIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ d: 'M12 10L8 6L4 10',
+ path: (
+ <>
+
+
+ ),
+});
+
+const ChevronDownIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+ ),
+});
+
+const ChevronLeftIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+ ),
+});
+
+const ChevronRightIcon = createIcon({
+ Root: Svg,
+
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+ ),
+});
+
+const ChevronsLeftIcon = createIcon({
+ Root: Svg,
+
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+const ChevronsRightIcon = createIcon({
+ Root: Svg,
+
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+const ChevronsUpDownIcon = createIcon({
+ Root: Svg,
+
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+ChevronUpIcon.displayName = 'ChevronUpIcon';
+ChevronDownIcon.displayName = 'ChevronDownIcon';
+ChevronLeftIcon.displayName = 'ChevronLeftIcon';
+ChevronRightIcon.displayName = 'ChevronRightIcon';
+ChevronsLeftIcon.displayName = 'ChevronsLeftIcon';
+ChevronsRightIcon.displayName = 'ChevronsRightIcon';
+ChevronsUpDownIcon.displayName = 'ChevronsUpDownIcon';
+
+export {
+ ChevronUpIcon,
+ ChevronDownIcon,
+ ChevronLeftIcon,
+ ChevronRightIcon,
+ ChevronsLeftIcon,
+ ChevronsRightIcon,
+ ChevronsUpDownIcon,
+};
+
+const CircleIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+ ),
+});
+
+CircleIcon.displayName = 'CircleIcon';
+
+export { CircleIcon };
+
+const ClockIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+ClockIcon.displayName = 'ClockIcon';
+
+export { ClockIcon };
+
+const CloseIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+const CloseCircleIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+ ),
+});
+
+CloseIcon.displayName = 'CloseIcon';
+CloseCircleIcon.displayName = 'CloseCircleIcon';
+
+export { CloseIcon, CloseCircleIcon };
+
+const CopyIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+CopyIcon.displayName = 'CopyIcon';
+
+export { CopyIcon };
+
+const DownloadIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+ ),
+});
+
+DownloadIcon.displayName = 'DownloadIcon';
+export { DownloadIcon };
+
+const EditIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+EditIcon.displayName = 'EditIcon';
+export { EditIcon };
+
+const EyeIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+EyeIcon.displayName = 'EyeIcon';
+
+const EyeOffIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+
+ ),
+});
+
+EyeOffIcon.displayName = 'EyeOffIcon';
+export { EyeIcon, EyeOffIcon };
+
+const FavouriteIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+ ),
+});
+
+FavouriteIcon.displayName = 'FavouriteIcon';
+export { FavouriteIcon };
+
+const GlobeIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+ ),
+});
+
+GlobeIcon.displayName = 'GlobeIcon';
+export { GlobeIcon };
+
+const GripVerticalIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+
+
+
+ ),
+});
+
+GripVerticalIcon.displayName = 'GripVerticalIcon';
+export { GripVerticalIcon };
+
+const HelpCircleIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+ ),
+});
+
+HelpCircleIcon.displayName = 'HelpCircleIcon';
+export { HelpCircleIcon };
+
+const InfoIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+ ),
+});
+
+InfoIcon.displayName = 'InfoIcon';
+export { InfoIcon };
+
+const LinkIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+LinkIcon.displayName = 'LinkIcon';
+
+const ExternalLinkIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+ ),
+});
+
+ExternalLinkIcon.displayName = 'ExternalLinkIcon';
+export { LinkIcon, ExternalLinkIcon };
+
+const LoaderIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+ ),
+});
+
+LoaderIcon.displayName = 'LoaderIcon';
+export { LoaderIcon };
+
+const LockIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+LockIcon.displayName = 'LockIcon';
+export { LockIcon };
+
+const MailIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+MailIcon.displayName = 'MailIcon';
+export { MailIcon };
+
+const MenuIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+ ),
+});
+
+MenuIcon.displayName = 'MenuIcon';
+export { MenuIcon };
+
+const MessageCircleIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+ ),
+});
+
+MessageCircleIcon.displayName = 'MessageCircleIcon';
+
+export { MessageCircleIcon };
+
+const MoonIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+ ),
+});
+
+MoonIcon.displayName = 'MoonIcon';
+export { MoonIcon };
+
+const PaperclipIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+ ),
+});
+
+PaperclipIcon.displayName = 'PaperclipIcon';
+export { PaperclipIcon };
+
+const PhoneIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+ ),
+});
+
+PhoneIcon.displayName = 'PhoneIcon';
+export { PhoneIcon };
+
+const PlayIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+PlayIcon.displayName = 'PlayIcon';
+export { PlayIcon };
+
+const RemoveIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+ ),
+});
+
+RemoveIcon.displayName = 'RemoveIcon';
+export { RemoveIcon };
+
+const RepeatIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+
+ ),
+});
+
+RepeatIcon.displayName = 'RepeatIcon';
+
+const Repeat1Icon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+
+
+ ),
+});
+
+Repeat1Icon.displayName = 'Repeat1Icon';
+export { RepeatIcon, Repeat1Icon };
+
+const SearchIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+SearchIcon.displayName = 'SearchIcon';
+export { SearchIcon };
+
+const SettingsIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+SettingsIcon.displayName = 'SettingsIcon';
+export { SettingsIcon };
+
+const ShareIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+
+
+ ),
+});
+
+ShareIcon.displayName = 'ShareIcon';
+export { ShareIcon };
+
+const SlashIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+SlashIcon.displayName = 'SlashIcon';
+export { SlashIcon };
+
+const StarIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+ ),
+});
+
+StarIcon.displayName = 'StarIcon';
+export { StarIcon };
+
+const SunIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+
+
+
+
+
+
+ ),
+});
+
+SunIcon.displayName = 'SunIcon';
+export { SunIcon };
+
+const ThreeDotsIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+ ),
+});
+
+ThreeDotsIcon.displayName = 'ThreeDotsIcon';
+export { ThreeDotsIcon };
+
+const TrashIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+ ),
+});
+
+TrashIcon.displayName = 'TrashIcon';
+export { TrashIcon };
+
+const UnlockIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+UnlockIcon.displayName = 'UnlockIcon';
+export { UnlockIcon };
diff --git a/lite.todo/components/ui/icon/index.web.tsx b/lite.todo/components/ui/icon/index.web.tsx
new file mode 100755
index 0000000..3503efd
--- /dev/null
+++ b/lite.todo/components/ui/icon/index.web.tsx
@@ -0,0 +1,1573 @@
+import React from 'react';
+import { createIcon } from '@gluestack-ui/core/icon/creator';
+import { tva } from '@gluestack-ui/utils/nativewind-utils';
+import { VariantProps } from '@gluestack-ui/utils/nativewind-utils';
+import { PrimitiveIcon, Svg } from '@gluestack-ui/core/icon/creator';
+
+export const UIIcon = createIcon({
+ Root: PrimitiveIcon,
+});
+
+const iconStyle = tva({
+ base: 'text-typography-950 fill-none pointer-events-none',
+ variants: {
+ size: {
+ '2xs': 'h-3 w-3',
+ 'xs': 'h-3.5 w-3.5',
+ 'sm': 'h-4 w-4',
+ 'md': 'h-[18px] w-[18px]',
+ 'lg': 'h-5 w-5',
+ 'xl': 'h-6 w-6',
+ },
+ },
+});
+
+export const Icon = React.forwardRef<
+ React.ComponentRef,
+ React.ComponentPropsWithoutRef &
+ VariantProps & {
+ height?: number | string;
+ width?: number | string;
+ }
+>(function Icon({ size = 'md', className, ...props }, ref) {
+ if (typeof size === 'number') {
+ return (
+
+ );
+ } else if (
+ (props.height !== undefined || props.width !== undefined) &&
+ size === undefined
+ ) {
+ return (
+
+ );
+ }
+ return (
+
+ );
+});
+
+type ParameterTypes = Omit[0], 'Root'>;
+
+const accessClassName = (style: any) => {
+ const styleObject = Array.isArray(style) ? style[0] : style;
+ const keys = Object.keys(styleObject);
+ return styleObject[keys[1]];
+};
+
+const createIconUI = ({ ...props }: ParameterTypes) => {
+ const NewUIIcon = createIcon({ Root: Svg, ...props });
+ return React.forwardRef<
+ React.ComponentRef,
+ React.ComponentPropsWithoutRef &
+ VariantProps & {
+ height?: number | string;
+ width?: number | string;
+ }
+ >(function UIIcon({ className, ...inComingprops }, ref) {
+ const calculateClassName = React.useMemo(() => {
+ return className === undefined
+ ? accessClassName(inComingprops?.style)
+ : className;
+ }, [className, inComingprops?.style]);
+ return (
+
+ );
+ });
+};
+
+export { createIconUI as createIcon };
+
+// All Icons
+const AddIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+AddIcon.displayName = 'AddIcon';
+export { AddIcon };
+
+const AlertCircleIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+ ),
+});
+
+AlertCircleIcon.displayName = 'AlertCircleIcon';
+export { AlertCircleIcon };
+
+const ArrowUpIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+const ArrowDownIcon = createIcon({
+ Root: Svg,
+
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+const ArrowRightIcon = createIcon({
+ Root: Svg,
+
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+const ArrowLeftIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+ArrowUpIcon.displayName = 'ArrowUpIcon';
+ArrowDownIcon.displayName = 'ArrowDownIcon';
+ArrowRightIcon.displayName = 'ArrowRightIcon';
+ArrowLeftIcon.displayName = 'ArrowLeftIcon';
+
+export { ArrowUpIcon, ArrowDownIcon, ArrowRightIcon, ArrowLeftIcon };
+
+const AtSignIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+ <>
+
+
+
+
+ ),
+});
+
+AtSignIcon.displayName = 'AtSignIcon';
+
+export { AtSignIcon };
+
+const BellIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+BellIcon.displayName = 'BellIcon';
+
+export { BellIcon };
+
+const CalendarDaysIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ ),
+});
+
+CalendarDaysIcon.displayName = 'CalendarDaysIcon';
+
+export { CalendarDaysIcon };
+
+const CheckIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+ ),
+});
+
+const CheckCircleIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+CheckIcon.displayName = 'CheckIcon';
+CheckCircleIcon.displayName = 'CheckCircleIcon';
+
+export { CheckIcon, CheckCircleIcon };
+
+const ChevronUpIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ d: 'M12 10L8 6L4 10',
+ path: (
+ <>
+
+
+ ),
+});
+
+const ChevronDownIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+ ),
+});
+
+const ChevronLeftIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+ ),
+});
+
+const ChevronRightIcon = createIcon({
+ Root: Svg,
+
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+ ),
+});
+
+const ChevronsLeftIcon = createIcon({
+ Root: Svg,
+
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+const ChevronsRightIcon = createIcon({
+ Root: Svg,
+
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+const ChevronsUpDownIcon = createIcon({
+ Root: Svg,
+
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+ChevronUpIcon.displayName = 'ChevronUpIcon';
+ChevronDownIcon.displayName = 'ChevronDownIcon';
+ChevronLeftIcon.displayName = 'ChevronLeftIcon';
+ChevronRightIcon.displayName = 'ChevronRightIcon';
+ChevronsLeftIcon.displayName = 'ChevronsLeftIcon';
+ChevronsRightIcon.displayName = 'ChevronsRightIcon';
+ChevronsUpDownIcon.displayName = 'ChevronsUpDownIcon';
+
+export {
+ ChevronUpIcon,
+ ChevronDownIcon,
+ ChevronLeftIcon,
+ ChevronRightIcon,
+ ChevronsLeftIcon,
+ ChevronsRightIcon,
+ ChevronsUpDownIcon,
+};
+
+const CircleIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+ ),
+});
+
+CircleIcon.displayName = 'CircleIcon';
+export { CircleIcon };
+
+const ClockIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+ClockIcon.displayName = 'ClockIcon';
+
+export { ClockIcon };
+
+const CloseIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+const CloseCircleIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+ ),
+});
+
+CloseIcon.displayName = 'CloseIcon';
+CloseCircleIcon.displayName = 'CloseCircleIcon';
+
+export { CloseIcon, CloseCircleIcon };
+
+const CopyIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+CopyIcon.displayName = 'CopyIcon';
+
+export { CopyIcon };
+
+const DownloadIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+ ),
+});
+
+DownloadIcon.displayName = 'DownloadIcon';
+export { DownloadIcon };
+
+const EditIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+EditIcon.displayName = 'EditIcon';
+export { EditIcon };
+
+const EyeIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+EyeIcon.displayName = 'EyeIcon';
+
+const EyeOffIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+
+ ),
+});
+
+EyeOffIcon.displayName = 'EyeOffIcon';
+export { EyeIcon, EyeOffIcon };
+
+const FavouriteIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+ ),
+});
+
+FavouriteIcon.displayName = 'FavouriteIcon';
+export { FavouriteIcon };
+
+const GlobeIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+ ),
+});
+
+GlobeIcon.displayName = 'GlobeIcon';
+export { GlobeIcon };
+
+const GripVerticalIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+
+
+
+ ),
+});
+
+GripVerticalIcon.displayName = 'GripVerticalIcon';
+export { GripVerticalIcon };
+
+const HelpCircleIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+ ),
+});
+
+HelpCircleIcon.displayName = 'HelpCircleIcon';
+export { HelpCircleIcon };
+
+const InfoIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+ ),
+});
+
+InfoIcon.displayName = 'InfoIcon';
+export { InfoIcon };
+
+const LinkIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+LinkIcon.displayName = 'LinkIcon';
+
+const ExternalLinkIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+ ),
+});
+
+ExternalLinkIcon.displayName = 'ExternalLinkIcon';
+export { LinkIcon, ExternalLinkIcon };
+
+const LoaderIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+ ),
+});
+
+LoaderIcon.displayName = 'LoaderIcon';
+export { LoaderIcon };
+
+const LockIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+LockIcon.displayName = 'LockIcon';
+export { LockIcon };
+
+const MailIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+MailIcon.displayName = 'MailIcon';
+export { MailIcon };
+
+const MenuIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+ ),
+});
+
+MenuIcon.displayName = 'MenuIcon';
+export { MenuIcon };
+
+const MessageCircleIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+ ),
+});
+
+MessageCircleIcon.displayName = 'MessageCircleIcon';
+
+export { MessageCircleIcon };
+
+const MoonIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+ ),
+});
+
+MoonIcon.displayName = 'MoonIcon';
+export { MoonIcon };
+
+const PaperclipIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+ ),
+});
+
+PaperclipIcon.displayName = 'PaperclipIcon';
+export { PaperclipIcon };
+
+const PhoneIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+ ),
+});
+
+PhoneIcon.displayName = 'PhoneIcon';
+export { PhoneIcon };
+
+const PlayIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+PlayIcon.displayName = 'PlayIcon';
+export { PlayIcon };
+
+const RemoveIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+ ),
+});
+
+RemoveIcon.displayName = 'RemoveIcon';
+export { RemoveIcon };
+
+const RepeatIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+
+ ),
+});
+
+RepeatIcon.displayName = 'RepeatIcon';
+
+const Repeat1Icon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+
+
+ ),
+});
+
+Repeat1Icon.displayName = 'Repeat1Icon';
+export { RepeatIcon, Repeat1Icon };
+
+const SearchIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+SearchIcon.displayName = 'SearchIcon';
+export { SearchIcon };
+
+const SettingsIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+SettingsIcon.displayName = 'SettingsIcon';
+export { SettingsIcon };
+
+const ShareIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+
+
+ ),
+});
+
+ShareIcon.displayName = 'ShareIcon';
+export { ShareIcon };
+
+const SlashIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+SlashIcon.displayName = 'SlashIcon';
+export { SlashIcon };
+
+const StarIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+ ),
+});
+
+StarIcon.displayName = 'StarIcon';
+export { StarIcon };
+
+const SunIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+
+
+
+
+
+
+ ),
+});
+
+SunIcon.displayName = 'SunIcon';
+export { SunIcon };
+
+const ThreeDotsIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+ ),
+});
+
+ThreeDotsIcon.displayName = 'ThreeDotsIcon';
+export { ThreeDotsIcon };
+
+const TrashIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+
+ ),
+});
+
+TrashIcon.displayName = 'TrashIcon';
+export { TrashIcon };
+
+const UnlockIcon = createIcon({
+ Root: Svg,
+ viewBox: '0 0 24 24',
+ path: (
+ <>
+
+
+
+ ),
+});
+
+UnlockIcon.displayName = 'UnlockIcon';
+export { UnlockIcon };
diff --git a/lite.todo/package-lock.json b/lite.todo/package-lock.json
index 2e90448..76259f8 100755
--- a/lite.todo/package-lock.json
+++ b/lite.todo/package-lock.json
@@ -29,7 +29,7 @@
"react-native-reanimated": "^4.1.0",
"react-native-safe-area-context": "5.4.0",
"react-native-screens": "~4.11.1",
- "react-native-svg": "^15.2.0",
+ "react-native-svg": "^15.12.0",
"react-native-worklets": "^0.5.0",
"react-stately": "^3.39.0",
"tailwind-variants": "^0.1.20",
@@ -2096,21 +2096,6 @@
"react-native-web": ">=0.19.0"
}
},
- "node_modules/@gluestack-ui/core/node_modules/react-native-svg": {
- "version": "15.12.1",
- "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.12.1.tgz",
- "integrity": "sha512-vCuZJDf8a5aNC2dlMovEv4Z0jjEUET53lm/iILFnFewa15b4atjVxU6Wirm6O9y6dEsdjDZVD7Q3QM4T1wlI8g==",
- "license": "MIT",
- "dependencies": {
- "css-select": "^5.1.0",
- "css-tree": "^1.1.3",
- "warn-once": "0.1.1"
- },
- "peerDependencies": {
- "react": "*",
- "react-native": "*"
- }
- },
"node_modules/@gluestack-ui/utils": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@gluestack-ui/utils/-/utils-3.0.0.tgz",
@@ -9750,13 +9735,14 @@
}
},
"node_modules/react-native-svg": {
- "version": "15.2.0",
- "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.2.0.tgz",
- "integrity": "sha512-R0E6IhcJfVLsL0lRmnUSm72QO+mTqcAOM5Jb8FVGxJqX3NfJMlMP0YyvcajZiaRR8CqQUpEoqrY25eyZb006kw==",
+ "version": "15.12.0",
+ "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.12.0.tgz",
+ "integrity": "sha512-iE25PxIJ6V0C6krReLquVw6R0QTsRTmEQc4K2Co3P6zsimU/jltcDBKYDy1h/5j9S/fqmMeXnpM+9LEWKJKI6A==",
"license": "MIT",
"dependencies": {
"css-select": "^5.1.0",
- "css-tree": "^1.1.3"
+ "css-tree": "^1.1.3",
+ "warn-once": "0.1.1"
},
"peerDependencies": {
"react": "*",
diff --git a/lite.todo/package.json b/lite.todo/package.json
index c1afc6f..a6fc506 100755
--- a/lite.todo/package.json
+++ b/lite.todo/package.json
@@ -10,12 +10,16 @@
},
"dependencies": {
"@expo/html-elements": "^0.10.1",
+ "@expo/vector-icons": "^14.1.0",
"@gluestack-ui/core": "^3.0.0",
"@gluestack-ui/utils": "^3.0.0",
"@legendapp/motion": "^2.3.0",
"@react-native-async-storage/async-storage": "^2.2.0",
"babel-plugin-module-resolver": "^5.0.2",
"expo": "~53.0.22",
+ "expo-constants": "~17.1.7",
+ "expo-linking": "~7.1.7",
+ "expo-router": "~5.1.5",
"expo-status-bar": "~2.2.3",
"lucide-react-native": "^0.510.0",
"nativewind": "^4.1.23",
@@ -25,16 +29,12 @@
"react-native": "0.79.6",
"react-native-reanimated": "^4.1.0",
"react-native-safe-area-context": "5.4.0",
- "react-native-svg": "^15.2.0",
+ "react-native-screens": "~4.11.1",
+ "react-native-svg": "^15.12.0",
"react-native-worklets": "^0.5.0",
"react-stately": "^3.39.0",
"tailwind-variants": "^0.1.20",
- "tailwindcss": "^3.4.17",
- "expo-router": "~5.1.5",
- "react-native-screens": "~4.11.1",
- "expo-linking": "~7.1.7",
- "expo-constants": "~17.1.7",
- "@expo/vector-icons": "^14.1.0"
+ "tailwindcss": "^3.4.17"
},
"devDependencies": {
"@babel/core": "^7.25.2",
diff --git a/lite.todo/store/todoProvider.tsx b/lite.todo/store/todoProvider.tsx
new file mode 100755
index 0000000..df6e090
--- /dev/null
+++ b/lite.todo/store/todoProvider.tsx
@@ -0,0 +1,23 @@
+import { createContext, useContext } from "react";
+import { type Todo, useTodos } from "./useTodos";
+
+type TodosContextValue = ReturnType;
+
+const TodosContext = createContext(null);
+
+export function TodosProvider({ children }: { children: React.ReactNode }) {
+ const store = useTodos();
+ return (
+ {children}
+ );
+}
+
+export function useTodosCtx(): TodosContextValue {
+ const ctx = useContext(TodosContext);
+ if (!ctx) {
+ throw new Error("use TodosCtx must be used within ");
+ }
+ return ctx;
+}
+
+export type { Todo };