PVS-CHAT/new-components/layout/UserBar.tsx

import { UserInfoResponse } from '@/types/userinfo';
import { STORAGE_USERINFO_KEY } from '@/utils/constants/index';
import { Avatar } from 'antd';
import cls from 'classnames';
import Link from 'next/link';
import Image from 'next/image';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

function UserBar({ onlyAvatar = false }) {
  const [userInfo, setUserInfo] = useState<UserInfoResponse>();
  useEffect(() => {
    try {
      const user = JSON.parse(localStorage.getItem(STORAGE_USERINFO_KEY) ?? '');
      setUserInfo(user);
    } catch {
      return undefined;
    }
  }, []);
  const { pathname } = useRouter()

  return (
    <div className='flex flex-1 items-center justify-center '>
      <Link
        href='/chat'
        className={cls(
          'flex items-center w-full h-12 px-4 cursor-pointer  dark:hover:bg-theme-dark hover:rounded-xl',
          {
            'bg-[#7288FA] rounded-xl dark:bg-black text-[#fff]': pathname.startsWith('/chat'),
            'hover:bg-[#d8d8d8]': !pathname.startsWith('/chat'),
            'hover:text-[#3d8dfc]': !pathname.startsWith('/chat'),
          },
        )}
        key='/chat'
      >
        <div className='mr-3'>
            <Image
              key='image_chat'
              src={pathname === '/chat' ? '/pictures/chat_active.png' : '/pictures/chat.png'}
              alt='chat_image'
              width={40}
              height={40}
            />
        </div>
        <span className='text-sm'>{'在线对话'}</span>
      </Link>
    </div>
  );
}

export default UserBar;