feat(auth): implement modal login context and provider with google and gitHub buttons, remove auth pages

Author: tyronejosee

src/app/(public)/auth/login/page.tsx

@@ -3,6 +3,7 @@
 import { HeroUIProvider, ToastProvider } from "@heroui/react";
 import { ThemeProvider as NextThemesProvider } from "next-themes";
 import Favicon from "./favicon";
+import { ModalLoginContext } from "@/components/auth";
 
 type Props = {
   children: React.ReactNode;
@@ -24,7 +25,7 @@ export default function Providers({ children }: Props) {
       />
       <NextThemesProvider attribute="class" defaultTheme="system" enableSystem>
         <Favicon />
-        {children}
+        <ModalLoginContext>{children}</ModalLoginContext>
       </NextThemesProvider>
     </HeroUIProvider>
   );

src/app/providers.tsx

@@ -1,3 +1,4 @@
 export { default as GitHubButton } from "./github-button";
 export { default as GoogleButton } from "./google-button";
+export { default as ModalLoginContext } from "./login-modal";
 export { default as UserProfile } from "./user-profile";

src/components/auth/index.ts

@@ -0,0 +1,70 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useState,
+  ReactNode,
+} from "react";
+import { Modal, ModalContent, ModalHeader, ModalBody } from "@heroui/react";
+import { GoogleButton, GitHubButton } from "@/components/auth";
+
+type ModalContextType = {
+  open: () => void;
+  close: () => void;
+};
+
+const ModalLoginContext = createContext<ModalContextType | undefined>(
+  undefined,
+);
+
+export const useLoginModal = () => {
+  const context = useContext(ModalLoginContext);
+  if (!context) {
+    throw new Error("useLoginModal must be used within a ModalLoginProvider");
+  }
+  return context;
+};
+
+type Props = {
+  children: ReactNode;
+};
+
+export default function ModalLoginProvider({ children }: Props) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const open = useCallback(() => setIsOpen(true), []);
+  const close = useCallback(() => setIsOpen(false), []);
+
+  return (
+    <ModalLoginContext.Provider value={{ open, close }}>
+      {children}
+
+      <Modal isOpen={isOpen} onOpenChange={setIsOpen} backdrop="blur">
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader>
+                <div className="flex flex-col gap-2">
+                  <h2 className="text-2xl font-semibold tracking-tight">
+                    Welcome back
+                  </h2>
+                  <p className="text-sm text-neutral-500">
+                    Sign in to continue with your account
+                  </p>
+                </div>
+              </ModalHeader>
+              <ModalBody>
+                <section className="flex flex-col gap-2 pb-10">
+                  <GoogleButton />
+                  <GitHubButton />
+                </section>
+              </ModalBody>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </ModalLoginContext.Provider>
+  );
+}

src/components/auth/login-modal.tsx

@@ -0,0 +1,4 @@
+export { default as BlogCard } from "./blog-card";
+export { default as BlogDetail } from "./blog-detail";
+export { default as BlogList } from "./blog-list";
+export { default as BlogForm } from "./blog-form";