Proyectos de Subversion LeadersLinked - SPA

import React from 'react'

import React from 'react';

import { styled } from '@mui/material'

import { styled } from '@mui/material';

import CommentItem from './comment-item'

import CommentItem from './comment-item';

import EmptySection from '@components/UI/EmptySection'

import EmptySection from '@components/UI/EmptySection';

const CommentsContainer = styled('div')(({ theme }) => ({

const CommentsContainer = styled('div')(({ theme }) => ({

  display: 'flex',

  display: 'flex',

  flexDirection: 'column',

  flexDirection: 'column',

  gap: theme.spacing(0.5),

  gap: theme.spacing(0.5),

  maxHeight: '300px',

  maxHeight: '300px',

  overflow: 'auto'

  overflow: 'auto'

}))

}));

export default function CommentsList({ comments = [], onDelete, onReport }) {

export default function CommentsList({ comments = [], onDelete, onReport }) {

  if (!comments.length) {

  if (!comments.length) {

    return <EmptySection message='No hay comentarios' />

    return <EmptySection message='No hay comentarios' />;

  }

  }

  return (

  return (

    <CommentsContainer>

    <CommentsContainer>

      {comments.map((comment) => (

      {comments.map((comment) => (

        <CommentItem

        <CommentItem

          key={comment.unique}

          key={comment.unique}

          comment={comment}

          comment={comment}

          onDelete={onDelete}

          onDelete={onDelete}

          onReport={onReport}

          onReport={onReport}

        />

        />

      ))}

      ))}

    </CommentsContainer>

    </CommentsContainer>

  )

  );

}

}