48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
|
|
interface VisualLinkPreviewProps {
|
|
url: string;
|
|
title: string;
|
|
summary: string;
|
|
image: string;
|
|
}
|
|
|
|
export default function VisualLinkPreview({ url, title, summary, image }: VisualLinkPreviewProps) {
|
|
return (
|
|
<Link href={url} target="_blank" rel="noopener noreferrer" className="block my-8 no-underline group">
|
|
<div className="flex flex-col md:flex-row border border-neutral-dark rounded-lg overflow-hidden bg-white hover:shadow-md transition-shadow">
|
|
<div className="relative w-full md:w-48 h-48 md:h-auto flex-shrink-0 bg-neutral-light flex items-center justify-center">
|
|
{image ? (
|
|
<img
|
|
src={image}
|
|
alt={title}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
) : (
|
|
<div className="text-neutral-dark">No Image</div>
|
|
)}
|
|
</div>
|
|
<div className="p-4 flex flex-col justify-center">
|
|
<h3 className="text-lg font-bold text-primary mb-2 group-hover:underline line-clamp-2">
|
|
{title}
|
|
</h3>
|
|
<p className="text-text-secondary text-sm line-clamp-3">
|
|
{summary}
|
|
</p>
|
|
<span className="text-xs text-text-secondary mt-2 opacity-70">
|
|
{(() => {
|
|
try {
|
|
return new URL(url).hostname;
|
|
} catch (e) {
|
|
return url;
|
|
}
|
|
})()}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|