feat: add AppLoginPopupProvider for login modal functionality

Author: kingRayhan

package.json

@@ -44,7 +44,6 @@
     "dotenv": "^16.4.7",
     "drizzle-orm": "^0.41.0",
     "immer": "^10.1.1",
-    "instantsearch.css": "^8.5.1",
     "jotai": "^2.12.2",
     "lottie-react": "^2.4.1",
     "lucide-react": "^0.484.0",

src/app/test/page.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { useLoginPopup } from "@/components/app-login-popup";
+import React from "react";
+
+const Page = () => {
+  const pp = useLoginPopup();
+  return (
+    <div>
+      <button onClick={() => pp.show()}>open</button>
+    </div>
+  );
+};
+
+export default Page;

src/components/app-login-popup.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import React, { createContext, useCallback, useContext, useState } from "react";
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "./ui/alert-dialog";
+
+interface ContextType {
+  show: () => void;
+  closeModal: () => void;
+}
+
+const Context = createContext<ContextType | undefined>(undefined);
+
+export function AppLoginPopupProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const show = useCallback(() => {
+    setIsOpen(true);
+  }, []);
+
+  const closeModal = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  return (
+    <Context.Provider value={{ show, closeModal }}>
+      {children}
+      <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+        <AlertDialogContent aria-describedby={undefined}>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Titleee</AlertDialogTitle>
+          </AlertDialogHeader>
+          <AlertDialogDescription>COntent</AlertDialogDescription>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Context.Provider>
+  );
+}
+
+export function useLoginPopup() {
+  const context = useContext(Context);
+  if (context === undefined) {
+    throw new Error("useLoginPopup must be used within a ModalProvider");
+  }
+  return context;
+}

src/components/providers/CommonProviders.tsx

@@ -11,6 +11,7 @@ import { Provider as JotaiProvider } from "jotai";
 import { ThemeProvider } from "next-themes";
 import { AppConfirmProvider } from "../app-confirm";
 import { AppAlertProvider } from "../app-alert";
+import { AppLoginPopupProvider } from "../app-login-popup";
 
 interface Props {
   session: SessionResult;
@@ -26,7 +27,9 @@ const CommonProviders: React.FC<PropsWithChildren<Props>> = ({
         <SessionProvider session={session}>
           <AppConfirmProvider>
             <AppAlertProvider>
-              <ThemeProvider attribute="data-theme">{children}</ThemeProvider>
+              <AppLoginPopupProvider>
+                <ThemeProvider attribute="data-theme">{children}</ThemeProvider>
+              </AppLoginPopupProvider>
             </AppAlertProvider>
           </AppConfirmProvider>
         </SessionProvider>