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, changeCategory, handleSearch } =
    useMicrolearning();

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

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

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

      <SearchBar onChange={handleSearch} />

      <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'
      />
    </>
  );
}