Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3185 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3719 stevensc 1 
import React from 'react';
2 
import { styled, Typography } from '@mui/material';
3 
import { Link } from 'react-router-dom';
4 
import Options from '@components/UI/Option';
5 
 
6 
const CommentContainer = styled('div')(({ theme }) => ({
7 
  backgroundColor: '#ccc',
8 
  borderRadius: theme.shape.borderRadius,
9 
  display: 'flex',
10 
  flexDirection: 'column',
11 
  flexGrow: 1,
12 
  gap: theme.spacing(0.5),
13 
  padding: theme.spacing(0.5),
14 
  position: 'relative'
15 
}));
16 
 
17 
const CommentHeader = styled('div')(({ theme }) => ({
18 
  display: 'flex',
19 
  justifyContent: 'space-between',
20 
  gap: theme.spacing(0.5)
21 
}));
22 
 
23 
const CommentInfo = styled(Link)(() => ({
24 
  display: 'flex',
25 
  flexDirection: 'column'
26 
}));
27 
 
28 
export default function CommentItem({ comment, onDelete, onReport }) {
29 
  const {
30 
    user_url,
31 
    user_name,
32 
    time_elapsed,
33 
    comment: content,
34 
    link_delete,
35 
    link_abuse_report
36 
  } = comment;
37 
 
38 
  return (
39 
    <CommentContainer>
40 
      <CommentHeader>
41 
        <CommentInfo to={user_url}>
42 
          <Typography variant='h3'>{user_name}</Typography>
43 
          <Typography variant='overline'>{time_elapsed}</Typography>
44 
        </CommentInfo>
45 
 
46 
        <Options>
47 
          {link_delete ? (
48 
            <Options.Item onClick={() => onDelete(comment)}>Borrar</Options.Item>
49 
          ) : null}
50 
          {link_abuse_report ? (
51 
            <Options.Item onClick={() => onReport(link_abuse_report)}>Reportar</Options.Item>
52 
          ) : null}
53 
        </Options>
54 
      </CommentHeader>
55 
 
56 
      <Typography>{content}</Typography>
57 
    </CommentContainer>
58 
  );
59 
}