feat: add dialog when turning on pc

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",

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);
         }}
       />
+      <Dialog />
     </QueryClientProvider>
   );
 };

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<typeof Box>;
 
@@ -21,7 +22,12 @@ const Apps = (props: Props) => {
     {
       name: "Turn on PC",
       icon: <Ionicons name="desktop" />,
-      action: wakePcUp,
+      action: () =>
+        showDialog(
+          "Turn on PC",
+          "Are you sure wanna turn on the PC?",
+          wakePcUp
+        ),
     },
   ];
 

src/app/index/index.tsx

@@ -34,6 +34,7 @@ const HomePage = () => {
           <Performance data={system} />
           <Storage data={system} />
         </Box>
+
         <Apps className="hidden md:flex md:flex-col md:flex-1" />
       </HStack>
     </Container>

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 (
+    <Modal
+      isVisible={isVisible}
+      onBackdropPress={close}
+      onBackButtonPress={close}
+      animationIn="fadeInDown"
+    >
+      <Container className="bg-white rounded-lg p-6 md:p-8">
+        <Text className="text-2xl font-medium">{title}</Text>
+        <Text className="mt-3">{message}</Text>
+
+        <HStack className="justify-end gap-4 mt-6">
+          <Button variant="ghost" onPress={close}>
+            Cancel
+          </Button>
+          <Button
+            onPress={() => {
+              onConfirm();
+              close();
+            }}
+          >
+            Confirm
+          </Button>
+        </HStack>
+      </Container>
+    </Modal>
+  );
+};
+
+export default React.memo(Dialog);

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<DialogStore>((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 });
+};