From 407d70d4629b5b470baa730961128c2d5cd0c3ee Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Thu, 30 Mar 2023 04:37:39 +0600
Subject: [PATCH] chore: auth divider

---
 src/components/Login/LoginComponent.tsx | 22 +++++++++++++++-------
 src/pages/signup.astro                  | 10 +++-------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/components/Login/LoginComponent.tsx b/src/components/Login/LoginComponent.tsx
index 1910c4146..04fd93ed5 100644
--- a/src/components/Login/LoginComponent.tsx
+++ b/src/components/Login/LoginComponent.tsx
@@ -17,13 +17,9 @@ export default function LoginComponent() {
 				<GoogleLoginButton />
 			</div>
 
-			<div className="flex items-center gap-2 text-sm text-slate-600 py-6">
-				<div className="h-px w-full bg-slate-200" />
-				OR
-				<div className="h-px w-full bg-slate-200" />
-			</div>
+			<Divider />
 
-			<EmailLoginButton />
+			<EmailLoginForm />
 
 			<div className="text-center text-slate-600 text-sm mt-6">
 				Don't have an account?{' '}
@@ -35,6 +31,18 @@ export default function LoginComponent() {
 	);
 }
 
+export const Divider: FunctionComponent<{ className?: string }> = ({
+	className,
+}) => {
+	return (
+		<div className="flex items-center gap-2 text-sm text-slate-600 py-6">
+			<div className="h-px w-full bg-slate-200" />
+			OR
+			<div className="h-px w-full bg-slate-200" />
+		</div>
+	);
+};
+
 export const GithubLoginButton: FunctionComponent<{ className?: string }> = ({
 	className,
 }) => {
@@ -69,7 +77,7 @@ export const GoogleLoginButton: FunctionComponent<{ className?: string }> = ({
 	);
 };
 
-export const EmailLoginButton: FunctionComponent<{}> = () => {
+export const EmailLoginForm: FunctionComponent<{}> = () => {
 	return (
 		<form className="w-full">
 			<label htmlFor="email" className="sr-only">
diff --git a/src/pages/signup.astro b/src/pages/signup.astro
index ca207f02d..d6b7225bf 100644
--- a/src/pages/signup.astro
+++ b/src/pages/signup.astro
@@ -1,7 +1,7 @@
 ---
 import CaptchaFields from '../components/Captcha/CaptchaFields.astro';
 import CaptchaScripts from '../components/Captcha/CaptchaScripts.astro';
-import { EmailLoginButton, GithubLoginButton, GoogleLoginButton } from '../components/Login/LoginComponent';
+import { Divider, EmailLoginForm, GithubLoginButton, GoogleLoginButton } from '../components/Login/LoginComponent';
 import BaseLayout from '../layouts/BaseLayout.astro';
 ---
 
@@ -30,13 +30,9 @@ import BaseLayout from '../layouts/BaseLayout.astro';
         <GoogleLoginButton />
       </div>
 
-      <div class="flex items-center gap-2 text-sm text-slate-600 py-6 w-full">
-				<div class="h-px w-full bg-slate-200" />
-				OR
-				<div class="h-px w-full bg-slate-200" />
-			</div>
+      <Divider />
 
-			<EmailLoginButton />
+			<EmailLoginForm />
     </div>
   </div>