first commit

app/(auth)/layout.tsx

@@ -0,0 +1,11 @@
+const AuthLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="min-h-[calc(100vh-8rem)] flex items-center justify-center p-4">
+      <div className="card w-full max-w-md bg-base-200 shadow-xl">
+        <div className="card-body">{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default AuthLayout;

app/(auth)/login/CustomLoginForm.tsx

@@ -0,0 +1,48 @@
+"use client";
+import Link from "next/link";
+const CustomLoginForm = () => {
+  return (
+    <>
+      <form className="mt-4">
+        {" "}
+        <div className="form-control">
+          <label className="label">
+            <span className="label-text">Email</span>
+          </label>
+          <input
+            type="email"
+            placeholder="you@example.com"
+            className="input input-bordered w-full"
+            required
+          />
+        </div>
+        <div className="form-control mt-4">
+          <label className="label">
+            <span className="label-text">Password</span>
+          </label>
+          <input
+            type="password"
+            placeholder="••••••••"
+            className="input input-bordered w-full"
+            required
+          />
+        </div>
+        <div className="form-control mt-6">
+          <button type="submit" className="btn btn-primary w-full">
+            Sign In
+          </button>
+        </div>
+      </form>
+      <div className="divider">OR</div>
+
+      <p className="text-center">
+        Don&apos;t have an account?{" "}
+        <Link href="/register" className="link link-primary">
+          Sign up
+        </Link>
+      </p>
+    </>
+  );
+};
+
+export default CustomLoginForm;

app/(auth)/login/SigninButton.tsx

@@ -0,0 +1,26 @@
+const SigninButton = ({
+  text,
+  style,
+  callback,
+  formAction
+}: {
+  text: string;
+  style: string;
+  callback?: () => void;
+  formAction?: any;
+}) => {
+  return (
+    <div className="form-control mt-6">
+      <button
+        type="submit"
+        formAction={formAction}
+        className={style}
+        onClick={callback}
+      >
+        {text}
+      </button>
+    </div>
+  );
+};
+
+export default SigninButton;

app/(auth)/login/page.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import CustomLoginForm from "./CustomLoginForm";
+import SigninButton from "./SigninButton";
+import { useState } from "react";
+import { handleGoogleLogin } from "@/app/actions/GoogleAction";
+
+const LoginPage = () => {
+  const [elogin, setElogin] = useState(false);
+  const ShowEmailLogin = () => {
+    setElogin(!elogin);
+  };
+
+  return (
+    <>
+      <h2 className="card-title text-2xl justify-center w-full">
+        Please Sign In
+      </h2>
+      <form className="mt-4">
+        <SigninButton
+          text="Google"
+          style="btn btn-primary w-full"
+          formAction={handleGoogleLogin}
+        />
+      </form>
+      <div className="mt-4">
+        <SigninButton
+          text="Email"
+          style="btn btn-primary w-full"
+          callback={ShowEmailLogin}
+        />
+      </div>
+      <div className="mt-4">{elogin ? <CustomLoginForm /> : ""}</div>
+    </>
+  );
+};
+
+export default LoginPage;

app/(auth)/register/page.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import Link from "next/link";
+
+const RegisterPage = () => {
+  return (
+    <>
+      <h2 className="card-title text-2xl justify-center">Create Account</h2>
+      <form className="mt-4">
+        <div className="form-control">
+          <label className="label">
+            <span className="label-text">Name</span>
+          </label>
+          <input
+            type="text"
+            placeholder="Your name"
+            className="input input-bordered w-full"
+            required
+          />
+        </div>
+
+        <div className="form-control mt-4">
+          <label className="label">
+            <span className="label-text">Email</span>
+          </label>
+          <input
+            type="email"
+            placeholder="you@example.com"
+            className="input input-bordered w-full"
+            required
+          />
+        </div>
+
+        <div className="form-control mt-4">
+          <label className="label">
+            <span className="label-text">Password</span>
+          </label>
+          <input
+            type="password"
+            placeholder="••••••••"
+            className="input input-bordered w-full"
+            required
+            minLength={6}
+          />
+        </div>
+        <div className="form-control mt-4">
+          <label className="label">
+            <span className="label-text">Confirm Password</span>
+          </label>
+          <input
+            type="password"
+            placeholder="••••••••"
+            className="input input-bordered w-full"
+            required
+          />
+        </div>
+        <div className="form-control mt-6">
+          <button type="submit" className="btn btn-primary w-full">
+            Create Account
+          </button>
+        </div>
+      </form>
+      <div className="divider">OR</div>
+
+      <p className="text-center">
+        Already have an account?{" "}
+        <Link href="/login" className="link link-primary">
+          Sign in
+        </Link>
+      </p>
+    </>
+  );
+};
+
+export default RegisterPage;