Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { useSelector } from 'react-redux';
import { Box, Typography } from '@mui/material';

import { useTimeline } from '@microlearning/hooks';

import { InfinityList } from '@shared/components';
import { DetailTag } from '@microlearning/components';

export function TimelinePage() {
  const { items, loading, hasMore, loadMore } = useTimeline();
  const labels = useSelector(({ intl }) => intl.labels);

  return (
    <>
      <Typography variant='h2'>Linea de tiempo</Typography>

      <Box
        display='flex'
        flexDirection='column'
        gap={1}
        width='100%'
        mt={2}
        maxHeight='60vh'
        overflow='auto'
      >
        <InfinityList
          items={items}
          loading={loading}
          emptyMessage={labels.datatable_szerorecords}
          onEnd={loadMore}
          hasMore={hasMore}
          renderItem={({ activity, added_on }, i) => (
            <DetailTag key={i} title={activity} label={added_on} />
          )}
        />
      </Box>
    </>
  );
}