Add Button to LoginProvider

components/sesyon/login-provider.js

@@ -3,6 +3,7 @@ import Link from 'next/link'
 import Image from 'next/image'
 import {signIn} from 'next-auth/react'
 import {useTheme} from '@mui/material/styles'
+import Button from '@mui/material/Button'
 
 export default function LoginProvider({id, title, width, height, callbackUrl}) {
   const theme = useTheme()
@@ -16,14 +17,17 @@ export default function LoginProvider({id, title, width, height, callbackUrl}) {
 
   return (
     <Link passHref href='/api/auth/signin'>
-      <Image
-        style={{cursor: 'pointer'}}
-        width={width}
-        height={height}
-        alt={title}
-        src={`/images/${id === 'github' ? `${id}-${theme.palette.mode}` : id}.svg`}
-        onClick={hanleClick}
-      />
+      <Button variant='outlined' color='inherit' startIcon={
+        <Image
+          width={width}
+          height={height}
+          alt={title}
+          src={`/images/${id === 'github' ? `${id}-${theme.palette.mode}` : id}.svg`}
+        />
+      } onClick={hanleClick}
+      >
+        {title}
+      </Button>
     </Link>
   )
 }