From 8d0db6ddfec74b7f7e1ea8bbadeccc378cb03346 Mon Sep 17 00:00:00 2001
From: Your Name <us01@sociowire.com>
Date: Mon, 19 Jan 2026 09:50:53 +0000
Subject: [PATCH] feat: Add content-type specific card styles

PostCardNew now renders different styles based on content_type:
- camera/live/stream: TV-style with red pulsing LIVE badge
- video: Card with centered play button overlay
- photo/picture/image: Polaroid white-frame style
- default: Standard gallery image

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/Posts/PostCardNew.jsx | 77 +++++++++++++++++++++++++++-
 1 file changed, 75 insertions(+), 2 deletions(-)

diff --git a/src/components/Posts/PostCardNew.jsx b/src/components/Posts/PostCardNew.jsx
index 05c70ad..b72e8d0 100644
--- a/src/components/Posts/PostCardNew.jsx
+++ b/src/components/Posts/PostCardNew.jsx
@@ -590,9 +590,82 @@ export default function PostCardNew({ post, selected, onSelect, onPostDeleted, o
       </div>
 
       {/* ─────────────────────────────────────────────────────────────────────────
-          Image/Gallery
+          Image/Gallery - Content type specific rendering
          ───────────────────────────────────────────────────────────────────────── */}
-      {hasGalleryImage ? (
+      {contentType === "camera" || contentType === "live" || contentType === "stream" ? (
+        /* LIVE/Camera: TV-style card with red pulsing dot */
+        <div className="relative w-full aspect-video bg-slate-900 overflow-hidden">
+          {hasGalleryImage ? (
+            <BlurImage
+              src={activeImage}
+              alt={title}
+              className="w-full h-full object-cover"
+              onError={handleImageError}
+            />
+          ) : (
+            <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-slate-800 to-slate-900">
+              <i className="fa-solid fa-video text-4xl text-slate-600" />
+            </div>
+          )}
+          {/* Red LIVE badge with pulsing dot */}
+          <div className="absolute top-3 left-3 flex items-center gap-2 px-3 py-1.5 rounded-lg bg-red-600/90 backdrop-blur-sm">
+            <span className="w-2.5 h-2.5 rounded-full bg-white animate-pulse shadow-[0_0_8px_rgba(255,255,255,0.8)]" />
+            <span className="text-xs font-black text-white tracking-wider">LIVE</span>
+          </div>
+          {/* Scanlines effect */}
+          <div className="absolute inset-0 pointer-events-none bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(0,0,0,0.1)_2px,rgba(0,0,0,0.1)_4px)]" />
+        </div>
+      ) : contentType === "video" ? (
+        /* VIDEO: Card with play button overlay */
+        <div className="relative w-full aspect-video bg-slate-900 overflow-hidden group/video">
+          {hasGalleryImage ? (
+            <BlurImage
+              src={activeImage}
+              alt={title}
+              className="w-full h-full object-cover transition-transform duration-500 group-hover/video:scale-105"
+              onError={handleImageError}
+            />
+          ) : (
+            <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-slate-800 to-slate-900">
+              <i className="fa-solid fa-film text-4xl text-slate-600" />
+            </div>
+          )}
+          {/* Play button overlay */}
+          <div className="absolute inset-0 flex items-center justify-center bg-black/20 group-hover/video:bg-black/30 transition-colors">
+            <motion.div
+              className="w-16 h-16 rounded-full bg-white/90 backdrop-blur-sm flex items-center justify-center shadow-2xl"
+              whileHover={{ scale: 1.1 }}
+              whileTap={{ scale: 0.95 }}
+            >
+              <i className="fa-solid fa-play text-slate-900 text-xl ml-1" />
+            </motion.div>
+          </div>
+          {/* VIDEO badge */}
+          <div className="absolute top-3 left-3 px-3 py-1.5 rounded-lg bg-blue-600/90 backdrop-blur-sm">
+            <span className="text-xs font-black text-white tracking-wider">VIDEO</span>
+          </div>
+        </div>
+      ) : contentType === "photo" || contentType === "picture" || contentType === "image" ? (
+        /* POLAROID: White frame photo style */
+        <div className="mx-4 mt-2 mb-4">
+          <div className="bg-white rounded-sm shadow-lg p-2 pb-10 transform rotate-[-1deg] hover:rotate-0 transition-transform duration-300">
+            {hasGalleryImage ? (
+              <BlurImage
+                src={activeImage}
+                alt={title}
+                className="w-full aspect-square object-cover"
+                onError={handleImageError}
+              />
+            ) : (
+              <div className="w-full aspect-square flex items-center justify-center bg-gray-100">
+                <i className="fa-solid fa-image text-4xl text-gray-300" />
+              </div>
+            )}
+            {/* Polaroid caption area - already white, title below */}
+          </div>
+        </div>
+      ) : hasGalleryImage ? (
+        /* DEFAULT: Standard gallery image */
         <GalleryImage
           src={activeImage}
           alt={title}