sign button functionality

taskinnasif144 · Feb 17, 2024 · 55ddaa4 · 55ddaa4
1 parent db68ed8
commit 55ddaa4
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/Components/loginRegister/LoginPage.js b/Components/loginRegister/LoginPage.js
@@ -4,14 +4,20 @@ import { toggleAuthDialog } from "@/redux/Slices/AuthDialogSlice";
 import Image from "next/image";
 import ClearOutlinedIcon from "@mui/icons-material/ClearOutlined";
 import LoginPageButtons from "./LoginPageButtons";
+import { useState } from "react";
+import Link from "next/link";
 
 const LoginPage = () => {
+  const [isNew, setIsNew] = useState(true);
+  const handleSignButton = () => {
+    setIsNew(!isNew);
+  };
   const dispath = useDispatch();
   const handleDialog = () => {
     dispath(toggleAuthDialog());
   };
   return (
-    <div className="h-full w-full xs:h-[500px] xs:w-[500px] flex flex-col justify-around fixed top-1/2 left-1/2 -translate-x-[50%] -translate-y-1/2 z-20 gradient-grey_to_black">
+    <div className="h-full w-full xs:h-[600px] xs:w-[500px] flex flex-col justify-around fixed top-1/2 left-1/2 -translate-x-[50%] -translate-y-1/2 z-20 gradient-grey_to_black">
       <button
         onClick={handleDialog}
         className=" p-0 bg-[#D9D9D9] text-black absolute top-0 right-0 xs:translate-x-1/2 xs:-translate-y-1/2 xs:rounded-full">
@@ -33,7 +39,9 @@ const LoginPage = () => {
       {/* PRODUCT */}
       {/* SIGN IN BUTTONS */}
       <div className="w-full sxs:w-[80%] mx-auto">
-        <h3 className="text-center mb-3">Sign In to Your Account</h3>
+        <h3 className="text-center mb-3">
+          {isNew ? "Create a new Account" : "Sign In to Your Account"}
+        </h3>
         <LoginPageButtons
           title={"Continue With Google"}
           path={"/clipArts/google.png"}
@@ -46,11 +54,11 @@ const LoginPage = () => {
         />
         <LoginPageButtons
           title={"Continue with Phone"}
-          path={"/clipArts/google.png"}
+          path={"/clipArts/phone.png"}
           isBottom={false}
         />
 
-        <div className="text-center">Or </div>
+        <div className="text-center mr-4">Or </div>
         <div className="flex justify-center">
           <LoginPageButtons
             title={"Apple"}
@@ -63,12 +71,25 @@ const LoginPage = () => {
             isBottom={true}
           />
         </div>
+        {isNew && (
+          <h5 className="text-center text-[12px] mt-8 cursor-pointer">
+            By Signing in, I agree to the{" "}
+            <Link className="text-[#9F70FD]" href={"#"}>
+              terms & conditions
+            </Link>
+          </h5>
+        )}
       </div>
       {/* SIGN IN BUTTONS */}
       {/* SIGN UP SING IN TOGGLE */}
       <div>
         <h3 className="text-center">
-          {"Don't have an account?"} <span className="font-bold">Sign Up</span>
+          {isNew ? "Already Have an Account? " : "Don't have an account? "}
+          <span
+            className="font-bold cursor-pointer select-none"
+            onClick={handleSignButton}>
+            {isNew ? "Sign In" : "Sign Up"}
+          </span>
         </h3>
       </div>
       {/* SIGN UP SING IN TOGGLE */}

diff --git a/Components/loginRegister/LoginPageButtons.js b/Components/loginRegister/LoginPageButtons.js
@@ -3,7 +3,10 @@ import Image from "next/image";
 
 const LoginPageButtons = ({ title, path, isBottom }) => {
   return (
-    <div className="py-2 px-4 mx-4 flex justify-start border-2 rounded-e-full rounded-s-full hover:bg-[#1B1A55] hover:border-[#1B1A55] transition-all duration-100">
+    <div
+      className={`py-2 px-4 mx-4 ${
+        !isBottom && "my-3"
+      } flex justify-start border-2 rounded-e-full rounded-s-full hover:bg-[#1B1A55] hover:border-[#1B1A55] transition-all duration-100 cursor-pointer select-none`}>
       <Image
         alt="Google Logo"
         src={path}