Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3694 | | 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 { useSelector } from 'react-redux';
3 
import { useNavigate } from 'react-router-dom';
4 
import { styled, Typography } from '@mui/material';
5 
import OpenInNew from '@mui/icons-material/OpenInNew';
6 
import Edit from '@mui/icons-material/Edit';
7 
 
8 
import { parse } from '@utils';
9 
 
10 
import Widget from '@components/UI/Widget';
11 
import Button from '@components/UI/buttons/Buttons';
12 
import Options from '@components/UI/Option';
13 
 
14 
export const QuestionStats = styled('div')`
15 
  display: flex;
16 
  align-items: center;
17 
  gap: 0.5rem;
18 
  justify-content: space-around;
19 
  padding: 5px;
20 
`;
21 
 
22 
const QuestionCategories = styled('ul')`
23 
  align-items: center;
24 
  display: flex;
25 
  gap: 0.5rem;
26 
  flex-wrap: wrap;
27 
  max-width: 200px;
28 
  li {
29 
    background: rgb(198, 209, 240);
30 
    border-radius: var(--border-radius);
31 
    color: var(--font-color);
32 
    padding: 0.3rem 0.4rem;
33 
    font-size: 0.7rem;
34 
    font-weight: 600;
35 
  }
36 
`;
37 
 
38 
const QuestionCard = ({
39 
  last_answer_on = '',
40 
  added_on = '',
41 
  user_name = '',
42 
  user_image = '',
43 
  title = '',
44 
  description = '',
45 
  categories = [],
46 
  views = 0,
47 
  answers = 0,
48 
  reactions = 0,
49 
  comments = 0,
50 
  link_view = '',
51 
  link_edit = '',
52 
  link_delete = '',
53 
  link_answers_add = '',
54 
  onDelete = () => null,
55 
  onEdit = () => null,
56 
  onReply = () => null
57 
}) => {
58 
  const labels = useSelector(({ intl }) => intl.labels);
59 
  const navigate = useNavigate();
60 
 
61 
  const onView = (url = '') => {
62 
    navigate(url);
63 
  };
64 
 
65 
  return (
66 
    <Widget>
67 
      <Widget.Header
68 
        avatar={user_image}
69 
        title={user_name}
70 
        renderAction={() => (
71 
          <Options>
72 
            {link_delete && (
73 
              <Options.Item onClick={() => onDelete(link_delete)}>Borrar</Options.Item>
74 
            )}
75 
          </Options>
76 
        )}
77 
      />
78 
 
79 
      <Widget.Body>
80 
        <QuestionCategories>
81 
          {categories.map(({ category }) => (
82 
            <li key={category}>{category}</li>
83 
          ))}
84 
        </QuestionCategories>
85 
 
86 
        <Typography variant='h2'>{title}</Typography>
87 
        <Typography variant='overline'>{`${labels.my_coach_question} ${added_on}`}</Typography>
88 
        {last_answer_on ? (
89 
          <Typography variant='overline'>{`${labels.my_coach_last_answer} ${last_answer_on}`}</Typography>
90 
        ) : null}
91 
        <Typography>{parse(description)}</Typography>
92 
      </Widget.Body>
93 
 
94 
      <QuestionStats>
95 
        <Typography variant='overline'>{`${answers} ${labels.my_coach_answers}`}</Typography>
96 
        <Typography variant='overline'>{`${reactions} ${labels.my_coach_reactions}`}</Typography>
97 
        <Typography variant='overline'>{`${views} ${labels.my_coach_views}`}</Typography>
98 
        <Typography variant='overline'>{`${comments} ${labels.comments}`}</Typography>
99 
      </QuestionStats>
100 
 
101 
      <Widget.Actions>
102 
        {link_view && (
103 
          <Button onClick={() => onView(link_view)}>
104 
            <OpenInNew />
105 
            {labels.view}
106 
          </Button>
107 
        )}
108 
        {link_edit && (
109 
          <Button onClick={() => onEdit(link_edit)}>
110 
            <Edit />
111 
            {labels.edit}
112 
          </Button>
113 
        )}
114 
        {link_answers_add && (
115 
          <Button onClick={() => onReply(link_edit)}>
116 
            <Edit />
117 
            {labels.reply}
118 
          </Button>
119 
        )}
120 
      </Widget.Actions>
121 
    </Widget>
122 
  );
123 
};
124 
 
125 
export default QuestionCard;