AraratChess/client/src/components/Messenger/Chat/TopInfo.tsx

import { FC } from 'react'
import { User } from '../../../models/User';
import Avatar from '../../UI/Avatar';
import IcoButton from '../../UI/IcoButton';
import formatDistanceToNow from 'date-fns/formatDistanceToNow';
import { BsTelephone } from '@react-icons/all-files/bs/BsTelephone';
import { BsCameraVideo } from '@react-icons/all-files/bs/BsCameraVideo';

interface TopInfoProps {
    data: User;
}

const TopInfo: FC<TopInfoProps> = ({data}) => {
    return (
        <div className='bg-gray-800 border-l-2 flex justify-between border-gray-700 px-12 p-2'>
            <div className="flex items-center">
                <Avatar avatar={data.avatar} className='mr-3'/>
                <div className="flex flex-col text-white">
                    <h2 className='font-semibold'>{data.name} {data.sname}</h2>
                    <p className='text-sm text-apricot'>
                        {data.online
                        ?
                            'online'
                        :
                            formatDistanceToNow(data.lastOnline, {addSuffix: true})
                        }
                    </p>
                </div>
            </div>
            <div className="flex items-center">
                <IcoButton icon={<BsTelephone/>} className='mr-2'/>
                <IcoButton icon={<BsCameraVideo/>}/>
            </div>
        </div>
    )
}

export default TopInfo;