39 lines
1.1 KiB
JavaScript
39 lines
1.1 KiB
JavaScript
import { useDisclosure } from 'hooks'
|
|
|
|
import { Icons } from 'components'
|
|
|
|
import { truncate } from 'utils'
|
|
|
|
const Description = props => {
|
|
//? Porps
|
|
const { description } = props
|
|
|
|
//? Assets
|
|
const [isShowDesc, showDescHandlers] = useDisclosure()
|
|
|
|
//? Render(s)
|
|
return (
|
|
<section>
|
|
<div className="px-3 lg:max-w-3xl xl:max-w-5xl">
|
|
<h4 className="mb-3 lg:border-b-2 lg:border-red-500 w-fit">介绍</h4>
|
|
<p className="text-xs leading-6 tracking-wider text-gray-600 lg:text-sm lg:leading-8">
|
|
{isShowDesc ? description : truncate(description, 300)}
|
|
</p>
|
|
{description.length > 300 && (
|
|
<button
|
|
type="button"
|
|
className="flex items-center py-2 text-sm text-sky-400"
|
|
onClick={showDescHandlers.toggle}
|
|
>
|
|
{isShowDesc ? '收起' : '查看更多'}
|
|
{!isShowDesc && <Icons.ArrowRight2 className="icon text-sky-400" />}
|
|
</button>
|
|
)}
|
|
</div>
|
|
<div className="section-divide-y " />
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default Description
|