Blur conversation images by default

apps/dashboard/src/components/origin-post.tsx

@@ -8,15 +8,24 @@ export interface OriginPost {
 }
 
 export function OriginPostCard({ post }: { post: OriginPost }) {
+  const [isImageRevealed, setIsImageRevealed] = useState(false);
+
   return (
-    <a aria-label={post.title} className="origin-post-card" href={post.url} rel="noreferrer" target="_blank">
-      {post.imageUrl ? <img alt={`Source post: ${post.title}`} loading="lazy" src={post.imageUrl} /> : null}
-      <span>
+    <div className="origin-post-card">
+      {post.imageUrl ? (
+        <div className="origin-post-image">
+          <img alt={`Source post: ${post.title}`} className={isImageRevealed ? undefined : 'is-blurred'} loading="lazy" src={post.imageUrl} />
+          <button aria-pressed={isImageRevealed} onClick={() => setIsImageRevealed((current) => !current)} type="button">
+            {isImageRevealed ? 'Blur original image' : 'Reveal original image'}
+          </button>
+        </div>
+      ) : null}
+      <a aria-label={post.title} className="origin-post-copy" href={post.url} rel="noreferrer" target="_blank">
         <small>Started from {post.subreddit ? `r/${post.subreddit}` : 'Reddit'}</small>
         <strong>{post.title}</strong>
         <span>Open original post</span>
-      </span>
-    </a>
+      </a>
+    </div>
   );
 }