39 lines
1.3 KiB
JavaScript
39 lines
1.3 KiB
JavaScript
import React, { useState } from 'react'
|
|
|
|
const COLLAPSE_AT = 560
|
|
|
|
export default function ArtworkDescription({ artwork }) {
|
|
const [expanded, setExpanded] = useState(false)
|
|
const content = (artwork?.description || '').trim()
|
|
const contentHtml = (artwork?.description_html || '').trim()
|
|
const collapsed = content.length > COLLAPSE_AT && !expanded
|
|
|
|
if (content.length === 0) return null
|
|
|
|
return (
|
|
<div>
|
|
<div
|
|
className={[
|
|
'max-w-[720px] overflow-hidden transition-[max-height] duration-300',
|
|
collapsed ? 'max-h-[11.5rem]' : 'max-h-[100rem]',
|
|
].join(' ')}
|
|
>
|
|
<div
|
|
className="prose prose-invert max-w-none text-sm leading-7 prose-p:my-3 prose-p:text-white/50 prose-a:text-accent prose-a:no-underline hover:prose-a:underline prose-strong:text-white/80 prose-em:text-white/70 prose-code:text-white/80"
|
|
dangerouslySetInnerHTML={{ __html: contentHtml }}
|
|
/>
|
|
</div>
|
|
|
|
{content.length > COLLAPSE_AT && (
|
|
<button
|
|
type="button"
|
|
className="mt-3 text-sm font-medium text-accent transition-colors hover:text-accent/80"
|
|
onClick={() => setExpanded((value) => !value)}
|
|
>
|
|
{expanded ? 'Show less' : 'Show more'}
|
|
</button>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|