Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3635 | Rev 3645 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3605 stevensc 1 
import React from 'react';
3635 stevensc 2 
import { Box, Typography } from '@mui/material';
3634 stevensc 3 
import { Report } from '@mui/icons-material';
3599 stevensc 4 
 
3634 stevensc 5 
import { Menu } from '@shared/components';
6 
import colors from '@styles/config/colors';
7 
 
3610 stevensc 8 
export const MessageItem = ({ message, onReport }) => {
3599 stevensc 9 
  const renderMessageContent = () => {
10 
    switch (message.type) {
11 
      case 'text':
12 
        return (
3635 stevensc 13 
          <Typography
14 
            sx={{
15 
              wordBreak: 'break-word',
16 
              color:
17 
                message.side === 'right' ? colors.button.text.primary : colors.button.text.secondary
18 
            }}
19 
          >
3599 stevensc 20 
            {message.message}
21 
          </Typography>
22 
        );
23 
      case 'image':
24 
        return (
25 
          <Box sx={{ maxWidth: '250px', maxHeight: '250px' }}>
26 
            <img
27 
              src={message.filename}
28 
              alt='Mensaje de imagen'
29 
              style={{
30 
                width: '100%',
31 
                height: 'auto',
32 
                borderRadius: '8px',
33 
                objectFit: 'cover'
34 
              }}
35 
            />
36 
          </Box>
37 
        );
38 
      case 'document':
39 
        return (
40 
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
41 
            <img
42 
              src='/images/extension/pdf.png'
43 
              alt='Documento'
44 
              style={{ width: '24px', height: '24px' }}
45 
            />
46 
            <Typography variant='body2' component='a' href={message.filename} download>
47 
              Descargar documento
48 
            </Typography>
49 
          </Box>
50 
        );
51 
      default:
52 
        return (
53 
          <Typography variant='body2' sx={{ wordBreak: 'break-word' }}>
54 
            {message.message || 'Contenido no disponible'}
55 
          </Typography>
56 
        );
57 
    }
58 
  };
59 
 
60 
  return (
61 
    <Box
62 
      sx={{
63 
        display: 'flex',
3636 stevensc 64 
        justifyContent: message.side === 'right' ? 'flex-end' : 'flex-start',
3599 stevensc 65 
        mb: 1,
66 
        px: 1
67 
      }}
68 
    >
69 
      <Box
70 
        sx={{
71 
          display: 'flex',
72 
          flexDirection: 'column',
73 
          maxWidth: '70%',
74 
          position: 'relative'
75 
        }}
76 
      >
3635 stevensc 77 
        <Typography variant='caption' sx={{ mb: 0.5 }}>
78 
          {message.sender_name}
79 
        </Typography>
3599 stevensc 80 
 
81 
        <Box
82 
          sx={{
3634 stevensc 83 
            backgroundColor:
84 
              message.side === 'right'
85 
                ? colors.button.background.primary
86 
                : colors.button.background.secondary,
3599 stevensc 87 
            borderRadius: message.side === 'right' ? '12px 12px 4px 12px' : '12px 12px 12px 4px',
3634 stevensc 88 
            padding: 0.625,
3599 stevensc 89 
            position: 'relative',
90 
            '&:hover .message-actions': {
91 
              opacity: 1
92 
            }
93 
          }}
94 
        >
95 
          {renderMessageContent()}
96 
 
3635 stevensc 97 
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, marginTop: 0.5 }}>
3634 stevensc 98 
            <Typography variant='caption'>{message.date}</Typography>
3599 stevensc 99 
 
3634 stevensc 100 
            {message.abuse_report_url && (
101 
              <Menu className='message-actions'>
102 
                <Menu.Item onClick={() => onReport(message.abuse_report_url)}>
103 
                  <Report sx={{ mr: 1 }} />
104 
                  Reportar mensaje
105 
                </Menu.Item>
106 
              </Menu>
3599 stevensc 107 
            )}
108 
          </Box>
109 
        </Box>
110 
      </Box>
111 
    </Box>
112 
  );
113 
};