49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
'use client'
|
|
import React, { useState } from 'react'
|
|
|
|
interface ShowMoreProps {
|
|
text?: string
|
|
}
|
|
|
|
const ShowMore = ({ text }: ShowMoreProps) => {
|
|
const [isExpandedMobile, setIsExpandedMobile] = useState(false)
|
|
const [isExpandedDesktop, setIsExpandedDesktop] = useState(false)
|
|
|
|
if (!text) return null
|
|
|
|
const maxLength = {
|
|
mobile: 100,
|
|
desktop: 100,
|
|
}
|
|
|
|
return (
|
|
<div className="pb-5">
|
|
{/* мобила */}
|
|
<div
|
|
onClick={() => setIsExpandedMobile(!isExpandedMobile)}
|
|
className={`lg:hidden text-justify relative cursor-pointer overflow-hidden
|
|
${isExpandedMobile ? 'max-h-[2000px]' : 'max-h-[300px]'}`}
|
|
>
|
|
{isExpandedMobile ? text : text.slice(0, maxLength.mobile)}
|
|
{!isExpandedMobile && text.length > maxLength.mobile && (
|
|
<div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-white to-transparent" />
|
|
)}
|
|
</div>
|
|
|
|
{/* десктоп */}
|
|
<div
|
|
onClick={() => setIsExpandedDesktop(!isExpandedDesktop)}
|
|
className={`hidden lg:block text-justify relative cursor-pointer overflow-hidden
|
|
${isExpandedDesktop ? 'max-h-[2000px]' : 'max-h-[300px]'}`}
|
|
>
|
|
{isExpandedDesktop ? text : text.slice(0, maxLength.desktop)}
|
|
{!isExpandedDesktop && text.length > maxLength.desktop && (
|
|
<div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-white to-transparent" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ShowMore
|