Untitled

import React, { useEffect } from 'react'
import Button from '../../common/components/buttons/Button'
import '../../assets/styles/main.css'
import { useSelector, useDispatch } from 'react-redux'
import { logout, reset } from '../../app/authSlice'
import { useNavigate } from 'react-router-dom'
import LinkButton from '../../common/components/links/Link'
import Spiner from '../../common/utils/Spiner'


function Dashboard() {
  const navigate = useNavigate()
  const dispatch = useDispatch()
  const { user} = useSelector((state) => state.auth)


  const handleLogout = (e) => {
    e.preventDefault()
    dispatch(logout())
    dispatch(reset())
    navigate('/')
  }


  return (
    <>
      {user ?
        (
          <>
            <div className='w-full h-screen flex justify-center items-center flex-col' >
              <h1 className='text-6xl mb-10'>HELLO WORLD</h1>
              <Button type='submit' className='btn mb-5' onClick={handleLogout} disabled={isLoding}>{isLoding ? <Spiner /> : 'Logout'}</Button>
            </div>
          </>
        )
        : (
          <>
            <div className='w-full h-screen flex justify-center items-center flex-col' >
              <h1 className='text-6xl mb-10'>create you account now</h1>
              <LinkButton to='/login' className='btn mb-10 text-center flex items-center justify-center'>login</LinkButton>
              <LinkButton to='/signUp' className='btn text-center flex items-center justify-center'>sign up</LinkButton>
            </div>
          </>
        )
      }
    </>
  )
}

export default Dashboard