You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
1.4 KiB
56 lines
1.4 KiB
import { Image } from '@nextui-org/image' |
|
import { useFetchWebMetadata } from '@/hooks/useFetchWebMetadata' |
|
import { cn } from '@/lib/utils' |
|
import { useMemo } from 'react' |
|
|
|
export default function WebPreview({ |
|
url, |
|
className, |
|
size = 'normal' |
|
}: { |
|
url: string |
|
className?: string |
|
size?: 'normal' | 'small' |
|
}) { |
|
const { title, description, image } = useFetchWebMetadata(url) |
|
const hostname = useMemo(() => { |
|
try { |
|
return new URL(url).hostname |
|
} catch { |
|
return '' |
|
} |
|
}, [url]) |
|
|
|
if (!title) { |
|
return null |
|
} |
|
|
|
return ( |
|
<div |
|
className={cn('p-0 hover:bg-muted/50 cursor-pointer flex w-full', className)} |
|
onClick={(e) => { |
|
e.stopPropagation() |
|
window.open(url, '_blank') |
|
}} |
|
> |
|
{image && ( |
|
<Image |
|
src={image} |
|
className={`rounded-l-lg object-cover w-2/5 ${size === 'normal' ? 'h-44' : 'h-24'}`} |
|
removeWrapper |
|
/> |
|
)} |
|
<div className={`flex-1 w-0 p-2 border ${image ? 'rounded-r-lg' : 'rounded-lg'}`}> |
|
<div className="text-xs text-muted-foreground">{hostname}</div> |
|
<div className={`font-semibold ${size === 'normal' ? 'line-clamp-2' : 'line-clamp-1'}`}> |
|
{title} |
|
</div> |
|
<div |
|
className={`text-xs text-muted-foreground ${size === 'normal' ? 'line-clamp-5' : 'line-clamp-2'}`} |
|
> |
|
{description} |
|
</div> |
|
</div> |
|
</div> |
|
) |
|
}
|
|
|