redhare-demo/components/Logout.js

37 lines
902 B
JavaScript

import { useRouter } from 'next/navigation'
import { useDispatch } from 'react-redux'
import { userLogout, showAlert } from 'store'
import { Icons } from 'components'
export default function Logout() {
//? Assets
const dispatch = useDispatch()
const router = useRouter()
//? Handlers
const handleLogout = () => {
router.push('/')
dispatch(userLogout())
dispatch(
showAlert({
status: 'success',
title: '退出登录成功',
})
)
}
//? Render(s)
return (
<button
type="button"
className="flex justify-between items-center px-7 transition-colors hover:bg-gray-100 py-4 text-xs text-gray-700 w-full border-t border-gray-300 cursor-pointer gap-x-2 md:text-sm"
onClick={handleLogout}
>
<span className="text-gray-700">退出</span>
<Icons.Logout className="text-black icon w-4 h-4" />
</button>
)
}