Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev Autor Línea Nro. Línea
3741 stevensc 1 
import React from 'react';
2 
import { useSelector } from 'react-redux';
3 
import { styled, Typography } from '@mui/material';
4 
 
5 
import { parse } from '@shared/utils';
6 
 
7 
import { Card, CardContent, CardHeader, Menu } from '@shared/components';
8 
 
9 
export const QuestionStats = styled('div')`
10 
  display: flex;
11 
  align-items: center;
12 
  gap: 0.5rem;
13 
  justify-content: space-around;
14 
  padding: 5px;
15 
`;
16 
 
17 
const QuestionCategories = styled('ul')`
18 
  align-items: center;
19 
  display: flex;
20 
  gap: 0.5rem;
21 
  flex-wrap: wrap;
22 
  max-width: 200px;
23 
  li {
24 
    background: rgb(198, 209, 240);
25 
    border-radius: var(--border-radius);
26 
    color: var(--font-color);
27 
    padding: 0.3rem 0.4rem;
28 
    font-size: 0.7rem;
29 
    font-weight: 600;
30 
  }
31 
`;
32 
 
33 
export function QuestionCard({
3746 stevensc 34 
  question: {
3741 stevensc 35 
    last_answer_on = '',
36 
    added_on = '',
37 
    user_name = '',
38 
    user_image = '',
39 
    title = '',
40 
    description = '',
41 
    categories = [],
42 
    views = 0,
43 
    answers = 0,
44 
    reactions = 0,
3746 stevensc 45 
    comments = 0
46 
  },
47 
  onEdit,
48 
  onDelete,
49 
  onReply,
50 
  onView
51 
}) {
52 
  const labels = useSelector(({ intl }) => intl.labels);
3741 stevensc 53 
 
54 
  return (
3746 stevensc 55 
    <Card sx={{ cursor: onView ? 'pointer' : 'default' }} onClick={onView}>
3741 stevensc 56 
      <CardHeader
57 
        avatar={user_image}
58 
        title={user_name}
59 
        renderAction={() => (
60 
          <Menu>
3746 stevensc 61 
            {onDelete && <Menu.Item onClick={onDelete}>Borrar</Menu.Item>}
62 
            {onEdit && <Menu.Item onClick={onEdit}>Editar</Menu.Item>}
63 
            {onReply && <Menu.Item onClick={onReply}>Responder</Menu.Item>}
3741 stevensc 64 
          </Menu>
65 
        )}
66 
      />
67 
 
68 
      <CardContent>
69 
        <QuestionCategories>
70 
          {categories.map((category) => (
71 
            <li key={category}>{category}</li>
72 
          ))}
73 
        </QuestionCategories>
74 
 
75 
        <Typography variant='h2'>{title}</Typography>
76 
        <Typography variant='overline'>{`${labels.my_coach_question} ${added_on}`}</Typography>
77 
        {last_answer_on ? (
78 
          <Typography variant='overline'>{`${labels.my_coach_last_answer} ${last_answer_on}`}</Typography>
79 
        ) : null}
80 
        <Typography>{parse(description)}</Typography>
81 
 
82 
        <QuestionStats>
83 
          <Typography variant='overline'>{`${answers} ${labels.my_coach_answers}`}</Typography>
84 
          <Typography variant='overline'>{`${reactions} ${labels.my_coach_reactions}`}</Typography>
85 
          <Typography variant='overline'>{`${views} ${labels.my_coach_views}`}</Typography>
86 
          <Typography variant='overline'>{`${comments} ${labels.comments}`}</Typography>
87 
        </QuestionStats>
88 
      </CardContent>
89 
    </Card>
90 
  );
91 
}