chore: auth divider

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">
+			<Divider />
-				<div className="h-px w-full bg-slate-200" />
-				OR
-				<div className="h-px w-full bg-slate-200" />
-			</div>
 
-			<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">

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">
+      <Divider />
-				<div class="h-px w-full bg-slate-200" />
-				OR
-				<div class="h-px w-full bg-slate-200" />
-			</div>
 
-			<EmailLoginButton />
+			<EmailLoginForm />
     </div>
   </div>