Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

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

import { styled } from '@mui/material';

import { parse } from '@utils';

import { CapsuleRating } from './UI';

const StyledCapsule = styled('article')`

  display: flex;

  border-bottom: 1px solid var(--border-primary);

  gap: 1rem;

  padding: 0.5rem;

  align-items: center;

  width: 100%;

  picture {

    width: 60px;

    height: 100px;

    img {

      width: 100%;

      height: 100%;

      object-fit: contain;

    }

  }

`;

const StyledCapsuleDescription = styled('div')`

  display: flex;

  flex-direction: column;

  flex: 1 1 50%;

  overflow: hidden;

`;

export const CapsuleItem = ({

  capsule: { name, description, image, total_rating, uuid },

  readOnly = false

}) => {

  return (

    <Link to={`/microlearning/capsules/${uuid}`}>

      <StyledCapsule>

        <picture>

          <img src={image} alt={`${name} capsule image`} />

        </picture>

        <StyledCapsuleDescription>

          <h2>{name}</h2>

          {parse(description)}

          <CapsuleRating

            readOnly={readOnly}

            defaultValue={Number(total_rating)}

            size='small'

            sx={{ mt: 1 }}

          />

        </StyledCapsuleDescription>

      </StyledCapsule>

    </Link>

  );

};