Change LoginProvider component & props

components/sesyon/koneksyon.js

@@ -15,12 +15,12 @@ import Snackbar from '@mui/material/Snackbar'
 import Tab from '@mui/material/Tab'
 import Tabs from '@mui/material/Tabs'
 import Typography from '@mui/material/Typography'
+import Grid from '@mui/material/Grid'
 import Visibility from '@mui/icons-material/Visibility'
 import VisibilityOff from '@mui/icons-material/VisibilityOff'
 import MuiAlert from '@mui/material/Alert'
 import LoginIcon from '@mui/icons-material/Login'
 import AppRegistrationRoundedIcon from '@mui/icons-material/AppRegistrationRounded'
-import TwitterIcon from '@mui/icons-material/Twitter'
 import axios from 'axios'
 
 import {validateEmail} from '../../lib/utils/emails'
@@ -28,14 +28,21 @@ import ResetPassword from '../password/reset-password'
 import ResetDialog from '../password/reset-dialog'
 import LoginProvider from './login-provider'
 
-const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
+const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3001'
 const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
 
 const PROVIDERS = [
+  {
+    id: 'google',
+    title: 'Google',
+    width: 46,
+    height: 46
+  },
   {
     id: 'twitter',
     title: 'Twitter',
-    icon: <TwitterIcon />
+    width: 56,
+    height: 46
   }
 ]
 
@@ -244,12 +251,14 @@ function Koneksyon({chimen}) {
         <TabPanel value={value} index={0}>
 
           <Box sx={{textAlign: 'center', marginBottom: 3}}>
-            <Typography>Se connecter avec</Typography>
-            {PROVIDERS.map(({id, title, icon}) => (
-              <Box key={id} marginTop={1}>
-                <LoginProvider id={id} title={title} icon={icon} callbackUrl={`${siteUrl}${chimen}`} />
-              </Box>
-            ))}
+            <Typography gutterBottom textAlign='center'>Connectez-vous avec</Typography>
+            <Grid container alignItems='center' justifyContent='center' spacing={5}>
+              {PROVIDERS.map(({id, title, width, height}) => (
+                <Grid key={id} item marginTop={1}>
+                  <LoginProvider id={id} title={title} width={width} height={height} callbackUrl={`${siteUrl}${chimen}`} />
+                </Grid>
+              ))}
+            </Grid>
           </Box>
 
           <Box sx={{textAlign: 'center', marginBottom: 3}}>

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
 }