Rev 3630 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
/* eslint-disable react/prop-types */
import React, { useState } from 'react'
import parse from "html-react-parser";
const SharedContent = ({
name,
image,
timeElapse,
description,
fileVideo,
fileImagePreview,
fileImage,
fileDocument,
}) => {
const [isReadMoreActive, setIsReadMoreActive] = useState(false);
const readMoreHandler = () => setIsReadMoreActive(!isReadMoreActive)
const htmlParsedText = (fullStringText) => {
const fullText = parse(fullStringText)
if (fullStringText.length > 500) {
const shortenedString = fullStringText.substr(0, 500);
const shortenedText = parse(`${shortenedString}... `);
return (
<p>
{isReadMoreActive ? fullText : shortenedText}
<span className='cursor-pointer' onClick={readMoreHandler}>
{isReadMoreActive ? " Leer menos" : " Leer más"}
</span>
</p>
);
}
return <p>{fullText}</p>
};
return (
<div className="shared-post-bar">
<div className="post-bar">
<div className="post_topbar">
<div className="usy-dt">
<img
src={image}
alt=""
style={{ width: "50px", height: "auto" }}
/>
<div className="usy-name">
<h3>{name}</h3>
<span>
{timeElapse}
</span>
</div>
</div>
</div>
<div className="job_descp">
<div className="show-read-more">
{htmlParsedText(description)}
</div>
{fileImage &&
<img src={fileImage} className="Entradas" loading='lazy' />
}
{fileVideo &&
<video
src={fileVideo}
controls
poster={fileImagePreview}
preload="none"
/>
}
{fileDocument &&
<a href={fileDocument} target="_blank" rel="noreferrer">
Descargar
</a>
}
</div>
</div>
</div>
)
}
export default SharedContent