Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

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

const StyledList = styled('ul')`

  display: flex;

  flex-direction: column;

  list-style: none;

  padding: 0;

  gap: 1rem;

`;

export function List({

  items = [],

  renderItem = () => {},

  emptyMessage = 'No hay elementos para mostrar',

  keyExtractor = (item) => item.id,

  renderHeader,

  renderFooter,

  styles = {}

}) {

  if (!items.length) {

    return <Typography>{emptyMessage}</Typography>;

  }

  return (

    <StyledList styles={styles}>

      {renderHeader && <li>{renderHeader()}</li>}

      {items.map((item, index) => {

        return <li key={keyExtractor(item)}>{renderItem(item, index)}</li>;

      })}

      {renderFooter && <li>{renderFooter()}</li>}

    </StyledList>

  );

}