Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { Link } from 'react-router-dom';

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

import { List, SearchBar, Spinner, Tabs } from '@shared/components';
import { CapsuleCard, CapsuleItem } from '@microlearning/components';

export default function CapsulesPage() {
  const {
    capsules,
    currentCapsule,
    categories,
    category,
    loading,
    searchTerm,
    changeCategory,
    searchCapsules
  } = useMicrolearning();

  if (loading || !currentCapsule || !capsules) return <Spinner />;

  return (
    <>
      {currentCapsule && <CapsuleCard capsule={currentCapsule} />}

      <Tabs value={category} onChange={(_, cat) => changeCategory(cat)}>
        {categories.map(({ label, value }) => (
          <Tabs.Item key={value} label={label} value={value} />
        ))}
      </Tabs>

      <SearchBar onChange={searchCapsules} value={searchTerm} />

      <List
        items={capsules}
        renderItem={(capsule) => (
          <Link to={`/microlearning/capsules/${capsule.uuid}`}>
            <CapsuleItem capsule={capsule} readOnly />
          </Link>
        )}
        emptyMessage='No hay cápsulas para mostrar'
        keyExtractor='uuid'
      />
    </>
  );
}