wip

components/blog/VisualLinkPreview.tsx

@@ -0,0 +1,41 @@
+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">
+            {new URL(url).hostname}
+          </span>
+        </div>
+      </div>
+    </Link>
+  );
+}