From edccb1e8d19bc45edf3fb4e4346979ec51fa7375 Mon Sep 17 00:00:00 2001
From: cottongin <cottongin@users.noreply.github.com>
Date: Mon, 24 Aug 2026 01:42:44 -0400
Subject: [PATCH] feat: add StickerWallThumbnail component for clickable
 sticker wall previews

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/components/StickerWallThumbnail.jsx   | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 frontend/src/components/StickerWallThumbnail.jsx

diff --git a/frontend/src/components/StickerWallThumbnail.jsx b/frontend/src/components/StickerWallThumbnail.jsx
new file mode 100644
index 0000000..7c2cacd
--- /dev/null
+++ b/frontend/src/components/StickerWallThumbnail.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+function StickerWallThumbnail({ imageUrl, loading, error, onClick }) {
+  const baseClasses = 'rounded-lg border border-gray-300 dark:border-gray-600 overflow-hidden flex items-center justify-center bg-gray-100 dark:bg-gray-700/50 flex-shrink-0';
+
+  if (loading) {
+    return (
+      <div className={`${baseClasses} w-[142px] h-[80px]`}>
+        <svg className="animate-spin h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+        </svg>
+      </div>
+    );
+  }
+
+  if (error || !imageUrl) {
+    return (
+      <div className={`${baseClasses} w-[142px] h-[80px]`}>
+        <span className="text-xs text-gray-400 dark:text-gray-500 text-center px-2">No stickers</span>
+      </div>
+    );
+  }
+
+  return (
+    <button
+      onClick={onClick}
+      className={`${baseClasses} w-[142px] h-[80px] cursor-pointer hover:border-indigo-400 dark:hover:border-indigo-500 transition group`}
+    >
+      <img
+        src={imageUrl}
+        alt="Sticker Wall Preview"
+        className="w-full h-full object-cover group-hover:opacity-90 transition"
+      />
+    </button>
+  );
+}
+
+export default StickerWallThumbnail;