Rev 2898 | Rev 3032 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React, { useState } from 'react'
import { Typography } from '@mui/material'
import { parse } from '@utils'
export default function FeedDescription({ description = '' }) {
const [showMore, setShowMore] = useState(false)
const stripText = description.replace(/<p>|<\/p>/g, '')
const maxLength = 140
const truncatedText = stripText.slice(0, maxLength)
const isTruncated = stripText.length > maxLength
const toggleShowMore = () => setShowMore((prevState) => !prevState)
return (
<Typography>
{parse(showMore ? stripText : truncatedText)}
{isTruncated && (
<Typography
onClick={toggleShowMore}
variant='overline'
color='primary'
sx={{ cursor: 'pointer' }}
aria-expanded={showMore}
>
{showMore ? ' Mostrar menos' : '... Mostrar más'}
</Typography>
)}
</Typography>
)
}