Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory :  /home/gositeme/domains/lavocat.ca/private_html/src/components/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

import React from 'react';
import { useWebSocket } from '@/context/StableWebSocketContext';

interface UserPresenceProps {
  userId: string;
  showText?: boolean;
  size?: 'sm' | 'md' | 'lg';
}

const UserPresence: React.FC<UserPresenceProps> = ({ 
  userId, 
  showText = false, 
  size = 'sm' 
}) => {
  const { connected } = useWebSocket();
  // Simplified: just show connected status for now
  const presence = { status: connected ? 'online' : 'offline', lastSeen: Date.now() };

  const getStatusColor = () => {
    if (!presence) return 'bg-gray-400';
    
    switch (presence.status) {
      case 'online': return 'bg-green-500';
      case 'away': return 'bg-yellow-500';
      case 'offline': return 'bg-gray-400';
      default: return 'bg-gray-400';
    }
  };

  const getStatusText = () => {
    if (!presence) return 'Offline';
    
    switch (presence.status) {
      case 'online': return 'Online';
      case 'away': return 'Away';
      case 'offline': return 'Offline';
      default: return 'Unknown';
    }
  };

  const getSizeClasses = () => {
    switch (size) {
      case 'sm': return 'w-2 h-2';
      case 'md': return 'w-3 h-3';
      case 'lg': return 'w-4 h-4';
      default: return 'w-2 h-2';
    }
  };

  const getLastSeenText = () => {
    if (!presence || presence.status === 'online') return null;
    
    const now = Date.now();
    const diff = now - presence.lastSeen;
    const minutes = Math.floor(diff / 60000);
    const hours = Math.floor(minutes / 60);
    const days = Math.floor(hours / 24);
    
    if (days > 0) return `${days}d ago`;
    if (hours > 0) return `${hours}h ago`;
    if (minutes > 0) return `${minutes}m ago`;
    return 'Just now';
  };

  return (
    <div className="flex items-center space-x-1">
      <div 
        className={`${getSizeClasses()} rounded-full ${getStatusColor()} flex-shrink-0`}
        title={`${getStatusText()}${getLastSeenText() ? ` - ${getLastSeenText()}` : ''}`}
      />
      {showText && (
        <span className="text-xs text-gray-500 dark:text-gray-400">
          {getStatusText()}
          {getLastSeenText() && presence?.status !== 'online' && (
            <span className="ml-1">({getLastSeenText()})</span>
          )}
        </span>
      )}
    </div>
  );
};

export default UserPresence;