Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3185 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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