Change LoginProvider component & props

components/sesyon/login-provider.js

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types'
 import Link from 'next/link'
+import Image from 'next/image'
 import {signIn} from 'next-auth/react'
-import {Button} from '@mui/material'
 
-export default function LoginProvider({id, title, icon, callbackUrl}) {
+export default function LoginProvider({id, title, width, height, callbackUrl}) {
   const hanleClick = event => {
     event.preventDefault()
     signIn(id, {
@@ -13,15 +13,14 @@ export default function LoginProvider({id, title, icon, callbackUrl}) {
 
   return (
     <Link passHref href='/api/auth/signin'>
-      <Button
-        variant='outlined'
-        size='large'
-        color='primary'
-        startIcon={icon}
+      <Image
+        style={{cursor: 'pointer'}}
+        width={width}
+        height={height}
+        alt={title}
+        src={`/images/${id}.svg`}
         onClick={hanleClick}
-      >
-        {title}
-      </Button>
+      />
     </Link>
   )
 }
@@ -29,6 +28,7 @@ export default function LoginProvider({id, title, icon, callbackUrl}) {
 LoginProvider.propTypes = {
   id: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
-  icon: PropTypes.node.isRequired,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
   callbackUrl: PropTypes.string.isRequired
 }