From 679317b9c10828388e764fbb06386b1c2d1d284e Mon Sep 17 00:00:00 2001
From: Fingertips <ghiantan0418@gmail.com>
Date: Mon, 23 Sep 2024 20:05:19 +0800
Subject: [PATCH] Separate auth title into its own file and add gradient with
 pulse animation - Moved the authentication page title into a separate
 component file for better structure and reusability. - Applied a gradient to
 the title text using Tailwind's gradient utilities. - Added a pulse animation
 to the title for visual emphasis. - Ensured the title component is easily
 configurable and maintains consistency across the auth pages.

---
 client/src/components/auth-title.tsx      | 27 +++++++++++++++++++++++
 client/src/pages/forgot-password/page.tsx | 16 +++++---------
 client/src/pages/reset-password/page.tsx  |  8 ++-----
 client/src/pages/sign-in/page.tsx         |  8 ++-----
 client/src/pages/sign-up/page.tsx         |  8 ++-----
 client/src/pages/verify-email/page.tsx    |  9 +++-----
 6 files changed, 41 insertions(+), 35 deletions(-)
 create mode 100644 client/src/components/auth-title.tsx

diff --git a/client/src/components/auth-title.tsx b/client/src/components/auth-title.tsx
new file mode 100644
index 0000000..b11d078
--- /dev/null
+++ b/client/src/components/auth-title.tsx
@@ -0,0 +1,27 @@
+interface AuthTitleProps {
+  title: string;
+  body?: string;
+}
+
+const AuthTitle = ({ title, body }: AuthTitleProps) => {
+  return (
+    <div className="w-full rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl">
+      <h2
+        className="text-lg lg:text-2xl font-extrabold text-center uppercase 
+        bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent
+        drop-shadow-primary-glow animate-pulse p-4"
+      >
+        {title}
+      </h2>
+      {body && (
+        <div className="w-full bg-primary/25 p-2.5 flex-center border-t border-primary/50">
+          <p className="text-xs lg:text-base text-center lg:max-w-[324px] text-foreground/60 font-medium">
+            {body}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export { AuthTitle };
diff --git a/client/src/pages/forgot-password/page.tsx b/client/src/pages/forgot-password/page.tsx
index 3331887..bd4dbe2 100644
--- a/client/src/pages/forgot-password/page.tsx
+++ b/client/src/pages/forgot-password/page.tsx
@@ -1,21 +1,15 @@
 import { SwitchAuth } from "@/components/switch-auth";
 import { ForgotPasswordForm } from "./_components/forgot-password-form";
 import { AppRoutes } from "@/constants/routes";
+import { AuthTitle } from "@/components/auth-title";
 
 const ForgotPasswordPage = () => {
   return (
     <section className="px-4 lg:px-0 h-full flex-center flex-col gap-y-6 w-fit mx-auto">
-      <div className="w-full rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl">
-        <h2 className="text-lg lg:text-2xl font-extrabold text-center uppercase pt-4 pb-2">
-          Forgot Password
-        </h2>
-        <div className="w-full bg-primary/25 p-2.5 flex-center border-t border-primary/50">
-          <p className="text-xs lg:text-base text-center lg:max-w-[324px] text-foreground/60 font-medium">
-            Enter your email address and wait for a reset password link to be
-            sent.
-          </p>
-        </div>
-      </div>
+      <AuthTitle
+        title="Forgot Password"
+        body="Enter your email address and wait for a reset password link to be sent."
+      />
 
       <ForgotPasswordForm />
 
diff --git a/client/src/pages/reset-password/page.tsx b/client/src/pages/reset-password/page.tsx
index 83af043..91ede2b 100644
--- a/client/src/pages/reset-password/page.tsx
+++ b/client/src/pages/reset-password/page.tsx
@@ -1,4 +1,5 @@
 import { SwitchAuth } from "@/components/switch-auth";
+import { AuthTitle } from "@/components/auth-title";
 import { AppRoutes } from "@/constants/routes";
 
 import { ResetPasswordForm } from "./_components/reset-password-form";
@@ -6,12 +7,7 @@ import { ResetPasswordForm } from "./_components/reset-password-form";
 const ResetPasswordPage = () => {
   return (
     <section className="px-4 lg:px-0 h-full flex-center flex-col gap-y-6 w-fit mx-auto">
-      <h2
-        className="text-lg lg:text-2xl font-extrabold text-center uppercase w-full
-        rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl p-4"
-      >
-        Reset Password
-      </h2>
+      <AuthTitle title="Reset Password" />
 
       <ResetPasswordForm />
 
diff --git a/client/src/pages/sign-in/page.tsx b/client/src/pages/sign-in/page.tsx
index 665be49..10837dd 100644
--- a/client/src/pages/sign-in/page.tsx
+++ b/client/src/pages/sign-in/page.tsx
@@ -1,4 +1,5 @@
 import { SwitchAuth } from "@/components/switch-auth";
+import { AuthTitle } from "@/components/auth-title";
 import { AppRoutes } from "@/constants/routes";
 import { Or } from "@/components/or";
 
@@ -7,12 +8,7 @@ import { SignInForm } from "./_components/sign-in-form";
 const SignInPage = () => {
   return (
     <section className="px-4 lg:px-0 h-full flex-center flex-col gap-y-6 w-fit mx-auto">
-      <h2
-        className="text-lg lg:text-2xl font-extrabold text-center uppercase w-full
-        rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl p-4"
-      >
-        Access Your Account
-      </h2>
+      <AuthTitle title="Access Your Account" />
 
       <SignInForm />
 
diff --git a/client/src/pages/sign-up/page.tsx b/client/src/pages/sign-up/page.tsx
index d157752..2cf996c 100644
--- a/client/src/pages/sign-up/page.tsx
+++ b/client/src/pages/sign-up/page.tsx
@@ -1,4 +1,5 @@
 import { SwitchAuth } from "@/components/switch-auth";
+import { AuthTitle } from "@/components/auth-title";
 import { AppRoutes } from "@/constants/routes";
 import { Or } from "@/components/or";
 
@@ -7,12 +8,7 @@ import { SignUpForm } from "./_components/sign-up-form";
 const SignUpPage = () => {
   return (
     <section className="px-4 lg:px-0 h-full flex-center flex-col gap-y-6 w-fit mx-auto">
-      <h2
-        className="text-lg lg:text-2xl font-extrabold text-center uppercase w-full
-        rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl p-4"
-      >
-        Create Account
-      </h2>
+      <AuthTitle title="Create Account" />
 
       <SignUpForm />
 
diff --git a/client/src/pages/verify-email/page.tsx b/client/src/pages/verify-email/page.tsx
index 1e19146..57b1f04 100644
--- a/client/src/pages/verify-email/page.tsx
+++ b/client/src/pages/verify-email/page.tsx
@@ -1,15 +1,12 @@
+import { AuthTitle } from "@/components/auth-title";
+
 import { VerifyEmailForm } from "./_components/verify-email-form";
 import { ResendCode } from "./_components/resend-code";
 
 const VerifyEmailPage = () => {
   return (
     <section className="px-4 lg:px-0 h-full flex-center flex-col gap-y-6 w-fit mx-auto">
-      <h2
-        className="text-lg lg:text-2xl font-extrabold text-center uppercase w-full
-        rounded-md border border-primary/50 bg-primary/15 drop-shadow-2xl p-4"
-      >
-        Verify Email
-      </h2>
+      <AuthTitle title="Verify Email" />
 
       <VerifyEmailForm />