Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3634 | Rev 3636 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3634 Rev 3635
Línea 1... Línea 1...
1 
import React from 'react';
 1 
import React from 'react';
2 
import { Box, Avatar, Typography } from '@mui/material';
 2 
import { Box, Typography } from '@mui/material';
3 
import { Report } from '@mui/icons-material';
 3 
import { Report } from '@mui/icons-material';
Línea 4... Línea 4...
4 
 
 4 
 
5 
import { Menu } from '@shared/components';
 5 
import { Menu } from '@shared/components';
Línea 6... Línea 6...
6 
import colors from '@styles/config/colors';
 6 
import colors from '@styles/config/colors';
7 
 
 7 
 
8 
export const MessageItem = ({ message, onReport }) => {
 8 
export const MessageItem = ({ message, onReport }) => {
9 
  const renderMessageContent = () => {
 9 
  const renderMessageContent = () => {
10 
    switch (message.type) {
 10 
    switch (message.type) {
- 
 
 11 
      case 'text':
- 
 
 12 
        return (
11 
      case 'text':
 13 
          <Typography
- 
 
 14 
            sx={{
- 
 
 15 
              wordBreak: 'break-word',
- 
 
 16 
              color:
- 
 
 17 
                message.side === 'right' ? colors.button.text.primary : colors.button.text.secondary
12 
        return (
 18 
            }}
13 
          <Typography variant='body2' sx={{ wordBreak: 'break-word' }}>
 19 
          >
14 
            {message.message}
 20 
            {message.message}
15 
          </Typography>
 21 
          </Typography>
16 
        );
 22 
        );
Línea 53... Línea 59...
53 
 
 59 
 
54 
  return (
 60 
  return (
55 
    <Box
 61 
    <Box
56 
      sx={{
 62 
      sx={{
57 
        display: 'flex',
 63 
        display: 'flex',
58 
        justifyContent: message.side === 'right' ? 'flex-end' : 'flex-start',
 64 
        justifyContent: message.side === 'left' ? 'flex-end' : 'flex-start',
59 
        mb: 1,
 65 
        mb: 1,
60 
        px: 1
 66 
        px: 1
61 
      }}
 67 
      }}
62 
    >
 68 
    >
Línea 66... Línea 72...
66 
          flexDirection: 'column',
 72 
          flexDirection: 'column',
67 
          maxWidth: '70%',
 73 
          maxWidth: '70%',
68 
          position: 'relative'
 74 
          position: 'relative'
69 
        }}
 75 
        }}
70 
      >
 76 
      >
71 
        {message.side === 'left' && (
 - 
 
72 
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
 - 
 
73 
            <Avatar
 - 
 
74 
              src={message.sender_image}
 - 
 
75 
              alt={message.sender_name}
 - 
 
76 
              sx={{ width: 24, height: 24 }}
 - 
 
77 
            />
 - 
 
78 
            <Typography variant='caption' color='text.secondary'>
 77 
        <Typography variant='caption' sx={{ mb: 0.5 }}>
79 
              {message.sender_name}
 78 
          {message.sender_name}
80 
            </Typography>
 79 
        </Typography>
81 
          </Box>
 - 
 
82 
        )}
 - 
 
Línea 83... Línea 80...
83 
 
 80 
 
84 
        <Box
 81 
        <Box
85 
          sx={{
 82 
          sx={{
86 
            backgroundColor:
 83 
            backgroundColor:
87 
              message.side === 'right'
 84 
              message.side === 'right'
88 
                ? colors.button.background.primary
 85 
                ? colors.button.background.primary
89 
                : colors.button.background.secondary,
 - 
 
90 
            color:
 - 
 
91 
              message.side === 'right' ? colors.button.text.primary : colors.button.text.secondary,
 86 
                : colors.button.background.secondary,
92 
            borderRadius: message.side === 'right' ? '12px 12px 4px 12px' : '12px 12px 12px 4px',
 87 
            borderRadius: message.side === 'right' ? '12px 12px 4px 12px' : '12px 12px 12px 4px',
93 
            padding: 0.625,
 88 
            padding: 0.625,
94 
            position: 'relative',
 89 
            position: 'relative',
95 
            '&:hover .message-actions': {
 90 
            '&:hover .message-actions': {
96 
              opacity: 1
 91 
              opacity: 1
97 
            }
 92 
            }
98 
          }}
 93 
          }}
99 
        >
 94 
        >
Línea 100... Línea 95...
100 
          {renderMessageContent()}
 95 
          {renderMessageContent()}
101 
 
 96 
 
Línea 102... Línea 97...
102 
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, marginTop: 1 }}>
 97 
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, marginTop: 0.5 }}>
103 
            <Typography variant='caption'>{message.date}</Typography>
 98 
            <Typography variant='caption'>{message.date}</Typography>
104 
 
 99