vibe coded v1

src/components/RichContentCard.tsx

@@ -0,0 +1,67 @@
+import type { RichContent } from "../model";
+
+interface RichContentCardProps {
+  richContent: RichContent;
+  compact?: boolean;
+}
+
+export default function RichContentCard(
+  { richContent, compact = false }: RichContentCardProps,
+) {
+  if (compact) {
+    return (
+      <a
+        href={richContent.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="rich-content-compact"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {richContent.thumbnailUrl
+          ? (
+            <img
+              src={richContent.thumbnailUrl}
+              alt={richContent.title ?? ""}
+              className="rich-content-compact-thumbnail"
+              onError={(e) => {
+                (e.target as HTMLImageElement).style.display = "none";
+              }}
+            />
+          )
+          : <span className="rich-content-compact-icon">🔗</span>}
+      </a>
+    );
+  }
+
+  return (
+    <a
+      href={richContent.url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={`rich-content-card rich-content-card--${richContent.type}`}
+    >
+      {richContent.thumbnailUrl && (
+        <img
+          src={richContent.thumbnailUrl}
+          alt={richContent.title ?? ""}
+          className="rich-content-thumbnail"
+          onError={(e) => {
+            (e.target as HTMLImageElement).style.display = "none";
+          }}
+        />
+      )}
+      <div className="rich-content-body">
+        {richContent.siteName && (
+          <span className="rich-content-badge">{richContent.siteName}</span>
+        )}
+        {richContent.title && (
+          <p className="rich-content-title">{richContent.title}</p>
+        )}
+        {richContent.description && (
+          <p className="rich-content-description">{richContent.description}</p>
+        )}
+        <span className="rich-content-url">{richContent.url}</span>
+      </div>
+    </a>
+  );
+}