Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { Link } from 'react-router-dom';
import { Box, Typography } from '@mui/material';

import { Card, CardContent } from '../card';
import { Menu } from '../menu';

export function CommentItem({
  comment: { user_url, user_name, time_elapsed, comment: content },
  onDelete,
  onReport
}) {
  return (
    <Card>
      <CardContent>
        <Menu>
          <Menu.Item onClick={onDelete}>Delete</Menu.Item>
          <Menu.Item onClick={onReport}>Report Abuse</Menu.Item>
        </Menu>

        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
          <Link to={user_url}>
            <Typography variant='h3'>{user_name}</Typography>
          </Link>
          <Typography variant='overline'>{time_elapsed}</Typography>
        </Box>

        <Typography>{content}</Typography>
      </CardContent>
    </Card>
  );
}