Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { Link } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { Typography } from '@mui/material'

import { TopicContainer, TopicProgress, TopicsGrid } from './UI'
import EmptySection from 'components/UI/EmptySection'

const Topics = () => {
  const topics = useSelector(({ microlearning }) =>
    microlearning.topicsAllIds.map(
      (topicId) => microlearning.topicById[topicId]
    )
  )
  const labels = useSelector(({ intl }) => intl.labels)

  return (
    <TopicsGrid>
      {topics.length ? (
        topics.map((topic) => <Topic key={topic.uuid} topic={topic} />)
      ) : (
        <EmptySection message={labels.datatable_szerorecords} />
      )}
    </TopicsGrid>
  )
}

const Topic = ({ topic }) => {
  const { name, image, progress, uuid } = topic

  return (
    <Link to={`${uuid}/capsules`}>
      <TopicContainer>
        <div className='c-header'>
          <Typography variant='h3'>{name}</Typography>
        </div>

        <img src={image} alt='' loading='lazy' />

        <div className='c-footer'>
          <TopicProgress variant='determinate' value={progress} />

          <span>{`${progress}%`}</span>
        </div>
      </TopicContainer>
    </Link>
  )
}

export default Topics