Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

import { Avatar, Box, IconButton, styled, Typography } from '@mui/material';

import { DeleteOutline } from '@mui/icons-material';

import { parse } from '@utils';

import { formatDate } from '@utils/dates';

import { CapsuleRating } from './UI';

const CommentContainer = styled(Box)`

  background-color: ${(props) => props.theme.background.color.primary};

  padding: 0.5rem;

  display: flex;

  justify-content: space-between;

  gap: 0.5rem;

`;

export const CapsuleComment = ({

  comment: { image, fullname, comment: content, rating, date, link_delete },

  onDelete

}) => {

  return (

    <CommentContainer>

      <Box display='flex' gap={1} alignItems='center'>

        <Avatar src={image} alt={fullname} sx={{ width: 60, height: 60 }} />

        <Box display='flex' flexDirection='column'>

          <Typography variant='h3'>{fullname}</Typography>

          <Typography>{parse(content)}</Typography>

          <CapsuleRating readOnly max={5} value={rating} size='small' />

        </Box>

      </Box>

      <Box display='flex' flexDirection='column' justifyContent='space-between' alignItems='end'>

        {link_delete && (

          <IconButton onClick={() => onDelete(link_delete)}>

            <DeleteOutline />

          </IconButton>

        )}

        <span>{formatDate(date)}</span>

      </Box>

    </CommentContainer>

  );

};