fix: update the login modal

JimmyLv · Mar 6, 2023 · 484d9cc · 484d9cc · vercel · Mar 6, 2023
1 parent 4d55ff6
commit 484d9cc
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 12 deletions.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -12,7 +12,11 @@ import { BASE_DOMAIN } from "~/utils/constants";
 import Github from "../components/GitHub";
 const poppins = Poppins({ weight: "800", subsets: ["latin"] });
 
-export default function Header() {
+export default function Header({
+  showSingIn,
+}: {
+  showSingIn: (show: boolean) => void;
+}) {
   return (
     <header className="supports-backdrop-blur:bg-white/60 max-w-8xl sticky top-0 z-40 mx-auto mx-4 w-full flex-none border-b border-slate-900/10 bg-white/95 pt-2  backdrop-blur transition-colors duration-500 dark:border-slate-50/[0.06] dark:border-slate-300/10 dark:bg-transparent lg:z-50 lg:mx-0 lg:border-0 lg:border-b lg:border-slate-900/10 lg:px-8">
       <div className="flex items-center justify-between px-3 sm:px-3">
@@ -53,9 +57,9 @@ export default function Header() {
               >
                 <circle cx="1" cy="1" r="1"></circle>
               </svg>
-              <span className="ml-2 min-[1372px]:hidden">开发者日记</span>
+              <span className="ml-2 min-[1372px]:hidden">开源项目，开发者日记</span>
               <span className="ml-2 hidden min-[1372px]:inline">
-                开发者日记
+                开源项目，开发者日记
               </span>
               <svg
                 width="3"
@@ -138,7 +142,7 @@ export default function Header() {
           >
             <Github width="33" height="33" />
           </a>
-          <SignIn />
+          <SignIn showSingIn={showSingIn} />
         </div>
       </div>
     </header>

diff --git a/components/SignIn.tsx b/components/SignIn.tsx
@@ -1,15 +1,16 @@
 import { useUser } from "@supabase/auth-helpers-react";
 import { AnimatePresence, motion } from "framer-motion";
-import { useEffect } from "react";
 import { useAnalytics } from "~/components/context/analytics";
-import { useSignInModal } from "~/components/sign-in-modal";
 import UserDropdown from "~/components/user-dropdown";
 import { FADE_IN_ANIMATION_SETTINGS } from "~/utils/constants";
 
-export default function SignIn() {
+export default function SignIn({
+  showSingIn,
+}: {
+  showSingIn: (show: boolean) => void;
+}) {
   const user = useUser();
   const { analytics } = useAnalytics();
-  const { SignInModal, setShowSignInModal } = useSignInModal();
 
   if (user) {
     analytics.identify(user.id, {
@@ -18,7 +19,7 @@ export default function SignIn() {
   }
 
   function handleSignIn() {
-    setShowSignInModal(true);
+    showSingIn(true);
     analytics.track("SignInButton Clicked");
   }
 
@@ -32,8 +33,6 @@ export default function SignIn() {
     }, [user])*/
   return (
     <div>
-      <SignInModal />
-
       <AnimatePresence>
         {user ? (
           <UserDropdown />

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -10,6 +10,7 @@ import type { AppProps } from "next/app";
 import React, { useState } from "react";
 import CommandMenu from "~/components/CommandMenu";
 import { AnalyticsProvider } from "~/components/context/analytics";
+import { useSignInModal } from "~/components/sign-in-modal";
 import { TailwindIndicator } from "~/components/tailwind-indicator";
 import { Toaster } from "~/components/ui/toaster";
 import { TooltipProvider } from "~/components/ui/tooltip";
@@ -31,6 +32,7 @@ function MyApp({
 }>) {
   // Create a new supabase browser client on every first render.
   const [supabaseClient] = useState(() => createBrowserSupabaseClient());
+  const { SignInModal, setShowSignInModal: showSingIn } = useSignInModal();
 
   return (
     <AnalyticsProvider>
@@ -41,7 +43,7 @@ function MyApp({
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
           <TooltipProvider>
             <div className="mx-auto flex min-h-screen flex-col justify-center px-2">
-              <Header />
+              <Header showSingIn={showSingIn} />
               <main
                 className={cn(
                   "mx-auto flex max-w-5xl flex-1 flex-col justify-center bg-white font-sans text-slate-900 antialiased dark:bg-slate-900 dark:text-slate-50",
@@ -56,6 +58,7 @@ function MyApp({
             </div>
             <TailwindIndicator />
             <Toaster />
+            <SignInModal />
           </TooltipProvider>
         </ThemeProvider>
       </SessionContextProvider>