mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Marc Mintel
2026-01-19 02:05:30 +01:00
parent 46266a7bbc
commit 4f6264f2e2
24 changed files with 431 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
components/blog/VisualLinkPreview.tsx
View File

@@ -10,36 +10,64 @@ interface VisualLinkPreviewProps {
}
export default function VisualLinkPreview({ url, title, summary, image }: VisualLinkPreviewProps) {
const hostname = (() => {
try {
return new URL(url).hostname;
} catch {
return url;
}
})();
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">
<Link href={url} target="_blank" rel="noopener noreferrer" className="block my-12 no-underline group">
<div className="flex flex-col md:flex-row border border-neutral-200 rounded-2xl overflow-hidden bg-white transition-all duration-500 hover:shadow-2xl hover:border-primary/20 hover:-translate-y-1 group">
<div className="relative w-full md:w-64 h-48 md:h-auto flex-shrink-0 bg-neutral-50 overflow-hidden">
{image ? (
<img
<Image
src={image}
alt={title}
className="w-full h-full object-cover"
fill
unoptimized
className="object-cover transition-transform duration-700 group-hover:scale-110"
/>
) : (
<div className="text-neutral-dark">No Image</div>
<div className="w-full h-full flex items-center justify-center bg-primary/5">
<svg className="w-12 h-12 text-primary/20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
</svg>
</div>
)}
{/* Industrial overlay */}
<div className="absolute inset-0 bg-primary/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
</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">
<div className="p-8 flex flex-col justify-center relative">
{/* Industrial accent corner */}
<div className="absolute top-0 right-0 w-12 h-12 bg-primary/5 -mr-6 -mt-6 rotate-45 transition-transform group-hover:scale-110" />
<div className="flex items-center gap-2 mb-3">
<span className="text-[10px] font-bold uppercase tracking-[0.2em] text-primary/60 bg-primary/5 px-2 py-0.5 rounded">
External Link
</span>
<span className="text-[10px] font-bold uppercase tracking-[0.2em] text-text-secondary/40">
{hostname}
</span>
</div>
<h3 className="text-xl font-bold text-text-primary mb-3 group-hover:text-primary transition-colors line-clamp-2 leading-tight">
{title}
</h3>
<p className="text-text-secondary text-sm line-clamp-3">
<p className="text-text-secondary text-base line-clamp-2 leading-relaxed mb-4">
{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 className="flex items-center gap-2 text-primary font-bold text-xs uppercase tracking-widest">
<span>Read more</span>
<svg className="w-4 h-4 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</div>
</div>
</div>
</Link>