From 8102f60ebcd0130c0f711c2363c55b7e475d304e Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Wed, 29 Mar 2023 22:24:11 +0600
Subject: [PATCH] refactor: github and google button

---
 src/components/Login/LoginComponent.tsx | 27 ++++++++++++++-----------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/components/Login/LoginComponent.tsx b/src/components/Login/LoginComponent.tsx
index 61863d285..3b3d4e70b 100644
--- a/src/components/Login/LoginComponent.tsx
+++ b/src/components/Login/LoginComponent.tsx
@@ -4,12 +4,8 @@ export default function LoginComponent() {
 	return (
 		<div className="space-y-5">
 			<div className="space-y-2">
-				<Button className="bg-[#333] text-white focus:ring-[#333]">
-					Login with Github
-				</Button>
-				<Button className="bg-[#4285f4] text-white focus:ring-[#4285f4]">
-					Login with Google
-				</Button>
+				<GithubLoginButton />
+				<GoogleLoginButton />
 			</div>
 			<div className="h-px w-full bg-slate-200" />
 
@@ -23,15 +19,22 @@ export default function LoginComponent() {
 	);
 }
 
-const Button: FunctionComponent<{ className?: string }> = ({
-	children,
+export const GithubLoginButton: FunctionComponent<{ className?: string }> = ({
 	className,
 }) => {
 	return (
-		<button
-			className={`inline-flex h-10 w-full items-center justify-center rounded border border-slate-300 p-2 text-sm font-medium outline-none transition duration-150 ease-in-out focus:ring-2 disabled:opacity-60 focus:ring-offset-1 ${className}`}
-		>
-			{children}
+		<button className="inline-flex h-10 w-full bg-[#333] text-white focus:ring-[#333] items-center justify-center rounded border border-slate-300 p-2 text-sm font-medium outline-none transition duration-150 ease-in-out focus:ring-2 disabled:opacity-60 focus:ring-offset-1">
+			Login with Github
+		</button>
+	);
+};
+
+export const GoogleLoginButton: FunctionComponent<{ className?: string }> = ({
+	className,
+}) => {
+	return (
+		<button className="inline-flex h-10 w-full bg-[#4285f4] text-white focus:ring-[#4285f4] items-center justify-center rounded border border-slate-300 p-2 text-sm font-medium outline-none transition duration-150 ease-in-out focus:ring-2 disabled:opacity-60 focus:ring-offset-1">
+			Login with Google
 		</button>
 	);
 };