konstitisyon.nu/components/session/sign.js

'use client'

import PropTypes from 'prop-types'
import {signOut} from 'next-auth/react'
import {useRouter} from 'next/navigation'
import Box from '@mui/material/Box'
import Stack from '@mui/material/Stack'
import Fab from '@mui/material/Fab'
import {styled} from '@mui/material/styles'
import Tooltip, {tooltipClasses} from '@mui/material/Tooltip'
import LogoutIcon from '@mui/icons-material/Logout'
import LoginIcon from '@mui/icons-material/Login'
import PersonAddIcon from '@mui/icons-material/PersonAdd'

const LightTooltip = styled(({className, ...props}) => (
  <Tooltip {...props} classes={{popper: className}} />
))(({theme}) => ({
  [`& .${tooltipClasses.tooltip}`]: {
    backgroundColor: theme.palette.common.white,
    color: 'rgba(0, 0, 0, 0.87)',
    boxShadow: theme.shadows[1],
    fontSize: 15,
  },
}))

export default function Sign({session}) {
  const router = useRouter()

  return (
    <Box sx={{display: 'flex', justifyContent: session ? 'start' : 'center', marginTop: 1}}>
      {session ? (
        <LightTooltip title='Se déconnecter' placement='right'>
          <Fab size='large' color='error' onClick={() => signOut()}>
            <LogoutIcon fontSize='large' />
          </Fab>
        </LightTooltip>
      ) : (
        <Stack direction='row' spacing={2}>
          <LightTooltip title='Se connecter' placement='left'>
            <Fab size='large' color='success' onClick={() => router.push('/login')}>
              <LoginIcon fontSize='large' />
            </Fab>
          </LightTooltip>
          <LightTooltip title='S’enregistrer' placement='right'>
            <Fab size='large' color='success' onClick={() => router.push('/register')}>
              <PersonAddIcon fontSize='large' />
            </Fab>
          </LightTooltip>
        </Stack>
      )}
    </Box>
  )
}

Sign.propTypes = {
  session: PropTypes.object
}