diff --git a/bun.lockb b/bun.lockb index 0c2a68e..e89c538 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 3b495b6..2b3b22d 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "react-hook-form": "^7.51.0", "react-native": "0.73.4", "react-native-circular-progress": "^1.3.9", + "react-native-modal": "^13.0.1", "react-native-safe-area-context": "4.8.2", "react-native-screens": "~3.29.0", "react-native-svg": "14.1.0", diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx index 9d7b989..8cc3d12 100644 --- a/src/app/_layout.tsx +++ b/src/app/_layout.tsx @@ -11,6 +11,7 @@ import Toast from "react-native-toast-notifications"; import { useStore } from "zustand"; import authStore from "@/stores/authStore"; import { toastStore } from "@/stores/toastStore"; +import Dialog from "@ui/Dialog"; const RootLayout = () => { const insets = useSafeAreaInsets(); @@ -46,6 +47,7 @@ const RootLayout = () => { toastStore.setState(ref); }} /> + ); }; diff --git a/src/app/index/_sections/Apps.tsx b/src/app/index/_sections/Apps.tsx index 0fce11b..38ead77 100644 --- a/src/app/index/_sections/Apps.tsx +++ b/src/app/index/_sections/Apps.tsx @@ -6,6 +6,7 @@ import { HStack } from "@ui/Stack"; import Button from "@ui/Button"; import { useNavigation } from "expo-router"; import { wakePcUp } from "@/app/apps/lib"; +import { showDialog } from "@/stores/dialogStore"; type Props = ComponentProps; @@ -21,7 +22,12 @@ const Apps = (props: Props) => { { name: "Turn on PC", icon: , - action: wakePcUp, + action: () => + showDialog( + "Turn on PC", + "Are you sure wanna turn on the PC?", + wakePcUp + ), }, ]; diff --git a/src/app/index/index.tsx b/src/app/index/index.tsx index 5221dc9..37fb8c0 100644 --- a/src/app/index/index.tsx +++ b/src/app/index/index.tsx @@ -34,6 +34,7 @@ const HomePage = () => { + diff --git a/src/components/ui/Dialog.tsx b/src/components/ui/Dialog.tsx new file mode 100644 index 0000000..7c661fc --- /dev/null +++ b/src/components/ui/Dialog.tsx @@ -0,0 +1,42 @@ +import React from "react"; +import Modal from "react-native-modal"; +import Container from "./Container"; +import Text from "./Text"; +import { HStack } from "./Stack"; +import Button from "./Button"; +import { useStore } from "zustand"; +import { dialogStore } from "@/stores/dialogStore"; + +const Dialog = () => { + const { isVisible, title, message, onConfirm, close } = useStore(dialogStore); + + return ( + + + {title} + {message} + + + + + + + + ); +}; + +export default React.memo(Dialog); diff --git a/src/stores/dialogStore.ts b/src/stores/dialogStore.ts new file mode 100644 index 0000000..e9f33af --- /dev/null +++ b/src/stores/dialogStore.ts @@ -0,0 +1,31 @@ +import { createStore } from "zustand"; + +type DialogStore = { + isVisible: boolean; + title: string; + message: string; + onConfirm: () => void; + open: (title: string, message: string, onConfirm: () => void) => void; + close: () => void; +}; + +export const dialogStore = createStore((set) => ({ + isVisible: false, + title: "", + message: "", + onConfirm: () => {}, + open(title, message, onConfirm) { + set({ title, message, onConfirm }); + }, + close() { + set({ isVisible: false }); + }, +})); + +export const showDialog = ( + title: string, + message: string, + onConfirm: () => void +) => { + dialogStore.setState({ title, message, onConfirm, isVisible: true }); +};