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'

      />

    </>

  );

}