import { useState, useEffect } from 'react' import { collabApi } from '../../api/client' /* ── Link Preview ── */ const previewCache = {} interface LinkPreviewProps { url: string tripId: number own: boolean onLoad: (() => void) | undefined } export function LinkPreview({ url, tripId, own, onLoad }: LinkPreviewProps) { const [data, setData] = useState(previewCache[url] || null) const [loading, setLoading] = useState(!previewCache[url]) useEffect(() => { if (previewCache[url]) return collabApi.linkPreview(tripId, url).then(d => { previewCache[url] = d setData(d) setLoading(false) if (d?.title || d?.description || d?.image) onLoad?.() }).catch(() => setLoading(false)) }, [url, tripId]) if (loading || !data || (!data.title && !data.description && !data.image)) return null const domain = (() => { try { return new URL(url).hostname.replace('www.', '') } catch { return '' } })() return ( e.currentTarget.style.opacity = '0.85'} onMouseLeave={e => e.currentTarget.style.opacity = '1'} > {data.image && ( e.currentTarget.style.display = 'none'} /> )}
{domain && (
{data.site_name || domain}
)} {data.title && (
{data.title}
)} {data.description && (
{data.description}
)}
) }