mscode07 · mscode07 · Dec 29, 2024 · Dec 29, 2024
diff --git a/apps/X/app/layout.tsx b/apps/X/app/layout.tsx
@@ -23,7 +23,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" className="dark">
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+      <body className={`${geistSans.variable} ${geistMono.variable} m-0`}>
         {children}
       </body>
     </html>

diff --git a/apps/X/app/lib/auth.ts b/apps/X/app/lib/auth.ts
@@ -135,7 +135,7 @@ export const authOptions = {
       return session;
     },
   },
-  page: {
-    signIn: "/auth",
+  pages: {
+    signIn: "/",
   },
 };
diff --git a/apps/X/app/login/page.tsx b/apps/X/app/login/page.tsx
@@ -0,0 +1,11 @@
+import { SigninComp } from "@/components/ui";
+
+const Login = () => {
+  return (
+    <div>
+      <div className=""></div>
+    </div>
+  );
+};
+
+export default Login;
diff --git a/apps/X/app/page.tsx b/apps/X/app/page.tsx
@@ -1,7 +1,12 @@
+import { SigninComp } from "@/components/ui";
 import React from "react";
 
 const Page = () => {
-  return <div>Page</div>;
+  return (
+    <div className="">
+      <SigninComp />
+    </div>
+  );
 };
 
 export default Page;

diff --git a/apps/X/app/signin/page.tsx b/apps/X/app/signin/page.tsx
diff --git a/apps/X/package.json b/apps/X/package.json
@@ -11,6 +11,7 @@
     "check-types": "tsc --noEmit"
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-slot": "^1.1.1",
     "@repo/ui": "*",
     "bcrypt": "^5.1.1",

diff --git a/apps/X/src/components/ui/LoginComp.tsx b/apps/X/src/components/ui/LoginComp.tsx
@@ -0,0 +1,3 @@
+export const LoginComp = () => {
+  return <div>Test</div>;
+};
diff --git a/apps/X/src/components/ui/SigninComp.tsx b/apps/X/src/components/ui/SigninComp.tsx
@@ -1,15 +1,17 @@
-import { SigninRightCom, X_logo } from "./index";
+import { SigninRightCom, X_logoBIG } from "./index";
 
 export const SigninComp = () => {
   return (
     <div>
-      <div className="grid grid-cols-6">
-        <div className="col-span-3 text-8xl">
-          <div className="flex justify-center items-center h-screen">
-            <X_logo />
+      <div className="custom:grid custom:grid-cols-6 custom:items-center">
+        <div className="custom:col-span-3 text-8xl">
+          <div className="custom:flex custom:justify-center custom:items-center">
+            <div className="mx-10 mt-20 ">
+              <X_logoBIG />
+            </div>
           </div>
         </div>
-        <div className="col-span-3">
+        <div className="custom:col-span-3 flex flex-col items-center justify-center mx-10">
           <SigninRightCom />
         </div>
       </div>

diff --git a/apps/X/src/components/ui/SigninRightCom.tsx b/apps/X/src/components/ui/SigninRightCom.tsx
@@ -1,24 +1,100 @@
-import { Button } from "./button";
-import { FcGoogle } from "react-icons/fc";
+"use client";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { signIn } from "next-auth/react";
 import { FaGithub } from "react-icons/fa6";
+import { FcGoogle } from "react-icons/fc";
+import { UserCredentials, LoginComp } from "./index";
+import { Button } from "./button";
 
 export const SigninRightCom = () => {
+  const handleGoogleSignIn = async () => {
+    await signIn("google");
+  };
+  const handleGithubSignIn = async () => {
+    await signIn("github");
+  };
+
+  const handleCredentialsSignIn = () => {
+    signIn("credentials");
+  };
+
   return (
     <div>
-      <div className="flex justify-center items-center h-screen">
+      <div className="custom:flex custom:justify-center custom:items-center custom:h-screen">
         <div>
           <div className="text-6xl font-bold my-8">Happening now</div>
           <div className="text-3xl font-bold">Join Today.</div>
-
-          <Button className="mt-10 px-20 ">
-            {" "}
-            <FcGoogle /> Sign UP with Google{" "}
-          </Button>
-          <br />
-          <Button className="mt-10 px-20">
-            {" "}
-            <FaGithub /> Sign UP with Google{" "}
-          </Button>
+          <div className="flex flex-col max-w-64">
+            <Button
+              className="mt-10 px-36 rounded-2xl"
+              onClick={handleGoogleSignIn}
+            >
+              {" "}
+              <FcGoogle /> Sign UP with Google{" "}
+            </Button>
+            <Button
+              className="mt-2 px-36 rounded-2xl font-bold"
+              onClick={handleGithubSignIn}
+            >
+              {" "}
+              <FaGithub /> Sign UP with Github{" "}
+            </Button>
+          </div>
+          <div className="flex items-center justify-center max-w-64 ml-4">
+            <hr className="w-72 h-0.5 my-4 bg-gray-200 border-0 rounded dark:bg-gray-700"></hr>
+            <p className="px-2 text-slate-500">or</p>
+            <hr className="w-72 h-0.5 my-4 bg-gray-200 border-0 rounded dark:bg-gray-700"></hr>
+          </div>
+          {/* <Button
+            className="bg-twitterBlue hover:bg-blue-500 px-24 mt-0 rounded-2xl text-white"
+            onClick={handleCredentialsSignIn}
+          >
+            Create Account
+          </Button> */}
+          <Dialog>
+            <DialogTrigger className="bg-twitterBlue hover:bg-blue-500 py-1 px-24 mt-0 rounded-2xl text-white">
+              Create Account
+            </DialogTrigger>
+            <DialogContent className="bg-black min-w-96 max-w-96">
+              <DialogHeader>
+                <DialogTitle className="w-4/5 flex items-center justify-center ">
+                  <UserCredentials />
+                </DialogTitle>
+              </DialogHeader>
+            </DialogContent>
+          </Dialog>
+          <p className="text-xs text-slate-600 mt-0.5 w-64">
+            By signing up, you agree to the{" "}
+            <span className="text-twitterBlue">Terms of Service</span> and
+            <span className="text-twitterBlue"> Privacy Policy</span>, including
+            <span className="text-twitterBlue"> Cookie Use.</span>
+          </p>
+          <div className="mt-12 font-semibold">Already have an account?</div>
+          {/* <Button
+            variant={"outline"}
+            className="mt-3 px-28 rounded-2xl text-twitterBlue"
+          >
+            Sign In
+          </Button> */}
+          <Dialog>
+            <DialogTrigger className=" border border-slate-500 py-1 px-24 mt-1 rounded-2xl text-twitterBlue font-semibold hover:bg-slate-900 ">
+              Sign In
+            </DialogTrigger>
+            <DialogContent className="bg-black min-w-96 max-w-96">
+              <DialogHeader>
+                <DialogTitle className="w-4/5 flex items-center justify-center ">
+                  <LoginComp />
+                </DialogTitle>
+              </DialogHeader>
+            </DialogContent>
+          </Dialog>
         </div>
       </div>
     </div>

diff --git a/apps/X/src/components/ui/UserCredentials.tsx b/apps/X/src/components/ui/UserCredentials.tsx
@@ -0,0 +1,49 @@
+import { signIn } from "next-auth/react";
+import { Button } from "./button";
+import { Input } from "./index";
+import { X_logo } from "./X_logo";
+
+export const UserCredentials = () => {
+  const handleCredentialsSignIn = () => {
+    signIn("credentials");
+  };
+  return (
+    <div>
+      <div className="">
+        <X_logo />
+      </div>
+
+      <div className="mt-5 w-72">
+        <div className="m-4 text-xl ">Create your Account</div>
+        <div className="flex-col justify-center items-center">
+          <Input
+            type="text"
+            placeholder="Username"
+            className="m-4 focus:border-blue-500"
+          />
+          <Input
+            type="text"
+            placeholder="Name"
+            className="m-4 focus:border-blue-500"
+          />
+          <Input
+            type="text"
+            placeholder="Email"
+            className="m-4 focus:border-blue-500"
+          />
+          <Input
+            type="passowrd"
+            placeholder="Password"
+            className="m-4 focus:border-blue-500"
+          />
+        </div>
+        <Button
+          className="w-full ml-4 rounded-2xl font-bold text-twitterBlue"
+          onClick={handleCredentialsSignIn}
+        >
+          Create Account
+        </Button>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/X/src/components/ui/X_logo.tsx b/apps/X/src/components/ui/X_logo.tsx
@@ -1,15 +1,17 @@
 export const X_logo = () => {
   return (
-    <>
-      <svg
-        viewBox="0 0 24 24"
-        aria-hidden="true"
-        className="r-4qtqp9 r-yyyyoo r-dnmrzs r-bnwqim r-lrvibr r-m6rgpd r-lrsllp r-1nao33i r-16y2uox r-8kz0gk"
-      >
-        <g>
-          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path>
-        </g>
-      </svg>
-    </>
+    <div>
+      <div className="flex justify-center items-center">
+        <svg
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+          className=" w-6 h-6 fill-current text-black dark:text-white"
+        >
+          <g>
+            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path>
+          </g>
+        </svg>
+      </div>
+    </div>
   );
 };
diff --git a/apps/X/src/components/ui/X_logoBIG.tsx b/apps/X/src/components/ui/X_logoBIG.tsx
@@ -0,0 +1,28 @@
+export const X_logoBIG = () => {
+  return (
+    <>
+      <div className="custom:flex custom:justify-center custom:items-center justify-start items-start">
+        <svg
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+          className="custom:w-96 custom:h-96 w-10 h-10 fill-current text-black dark:text-white"
+        >
+          <g>
+            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path>
+          </g>
+        </svg>
+      </div>
+
+      {/* <svg
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+        className="r-4qtqp9 r-yyyyoo r-dnmrzs r-bnwqim r-lrvibr r-m6rgpd r-lrsllp r-1nao33i r-16y2uox r-8kz0gk fill-current text-black dark:text-white"
+      >
+        <g>
+          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path>
+        </g>
+      </svg> */}
+    </>
+  );
+};
+// 1024*511