From 9646309a0a7b5bec2297e4bc484b6e083b40c9c7 Mon Sep 17 00:00:00 2001
From: kenilkb <kenil@tech4biz.org>
Date: Fri, 17 Jul 2026 16:21:29 +0530
Subject: [PATCH] Refactor showcase cards to use absolute grid overlay
 expansion system

---
 Channel-Frontend/src/pages/ShowcasePage.tsx | 184 +++++++++++---------
 1 file changed, 101 insertions(+), 83 deletions(-)

diff --git a/Channel-Frontend/src/pages/ShowcasePage.tsx b/Channel-Frontend/src/pages/ShowcasePage.tsx
index 7498764..4df893a 100644
--- a/Channel-Frontend/src/pages/ShowcasePage.tsx
+++ b/Channel-Frontend/src/pages/ShowcasePage.tsx
@@ -100,8 +100,13 @@ const TwitterEmbed: React.FC<{ url: string }> = ({ url }) => {
 };
 
 // ── Collapsible Video Description Component ──
-const VideoDescription: React.FC<{ text: string }> = ({ text }) => {
-  const [isExpanded, setIsExpanded] = useState(false);
+interface VideoDescriptionProps {
+  text: string;
+  isExpanded: boolean;
+  onToggleExpand: () => void;
+}
+
+const VideoDescription: React.FC<VideoDescriptionProps> = ({ text, isExpanded, onToggleExpand }) => {
   const shouldCollapse = text.length > 180 || text.includes('\n');
 
   return (
@@ -118,7 +123,7 @@ const VideoDescription: React.FC<{ text: string }> = ({ text }) => {
         <button
           onClick={(e) => {
             e.stopPropagation();
-            setIsExpanded(!isExpanded);
+            onToggleExpand();
           }}
           className="inline-flex items-center text-[10px] font-black uppercase tracking-wider text-blue-600 hover:text-blue-800 transition-colors focus:outline-none cursor-pointer"
         >
@@ -133,6 +138,7 @@ export const ShowcasePage: React.FC = () => {
   const [items, setItems] = useState<ContentShowcase[]>([]);
   const [loading, setLoading] = useState(true);
   const [playingVideoId, setPlayingVideoId] = useState<string | null>(null);
+  const [expandedItemId, setExpandedItemId] = useState<string | null>(null);
   
   // Resizable Lightbox state: compact | theater | cinema
   const [lightboxSize, setLightboxSize] = useState<'compact' | 'theater' | 'cinema'>('compact');
@@ -189,98 +195,110 @@ export const ShowcasePage: React.FC = () => {
             <p className="text-xs text-ink-500 mt-1 max-w-sm">There are no featured videos available in the showcase right now. Check back later!</p>
           </div>
         ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 animate-fadeIn">
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 items-start animate-fadeIn">
             {items.map((item) => {
               const ytId = extractYouTubeVideoId(item.youtubeUrl);
               const isIg = item.youtubeUrl.includes('instagram.com');
               const isTw = item.youtubeUrl.includes('twitter.com') || item.youtubeUrl.includes('x.com');
               const thumbnail = item.thumbnailUrl || (ytId ? `https://img.youtube.com/vi/${ytId}/hqdefault.jpg` : null);
+              const isExpanded = expandedItemId === item.id;
 
               return (
-                <div
-                  key={item.id}
-                  className="group flex flex-col bg-ink-0 border border-ink-200 hover:border-ink-350 rounded-2xl overflow-hidden hover:shadow-xl transition-all duration-500"
-                >
-                  {/* Video Player / Thumbnail */}
-                  <div className="relative aspect-video bg-ink-900 overflow-hidden">
-                    {thumbnail ? (
-                      <img
-                        src={thumbnail}
-                        alt={item.title}
-                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
-                      />
-                    ) : (
-                      /* Platform Fallback Gradients */
-                      <div className={`w-full h-full flex items-center justify-center ${
-                        isIg 
-                          ? 'bg-gradient-to-tr from-yellow-500 via-pink-500 to-purple-600'
-                          : isTw 
-                          ? 'bg-ink-950'
-                          : 'bg-ink-100'
-                      }`}>
-                        {isIg && (
-                          <svg className="w-12 h-12 text-white/90 animate-pulse" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
-                            <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
-                            <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z" />
-                            <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
-                          </svg>
-                        )}
-                        {isTw && (
-                          <svg className="w-12 h-12 text-white/90 animate-pulse" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
-                          </svg>
-                        )}
-                        {!isIg && !isTw && (
-                          <Play className="w-12 h-12 text-ink-400" />
-                        )}
+                <div key={item.id} className="relative min-h-[400px]">
+                  <motion.div
+                    layout
+                    transition={{ type: "spring", stiffness: 320, damping: 28 }}
+                    className={`group flex flex-col bg-ink-0 border rounded-2xl overflow-hidden transition-all duration-300 ${
+                      isExpanded
+                        ? 'absolute z-20 top-0 left-0 right-0 h-auto shadow-2xl border-ink-350 bg-ink-0'
+                        : 'relative w-full h-full border-ink-200 hover:border-ink-350 hover:shadow-xl'
+                    }`}
+                  >
+                    {/* Video Player / Thumbnail */}
+                    <div className="relative aspect-video bg-ink-900 overflow-hidden shrink-0">
+                      {thumbnail ? (
+                        <img
+                          src={thumbnail}
+                          alt={item.title}
+                          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
+                        />
+                      ) : (
+                        /* Platform Fallback Gradients */
+                        <div className={`w-full h-full flex items-center justify-center ${
+                          isIg 
+                            ? 'bg-gradient-to-tr from-yellow-500 via-pink-500 to-purple-600'
+                            : isTw 
+                            ? 'bg-ink-950'
+                            : 'bg-ink-100'
+                        }`}>
+                          {isIg && (
+                            <svg className="w-12 h-12 text-white/90 animate-pulse" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
+                              <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
+                              <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z" />
+                              <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
+                            </svg>
+                          )}
+                          {isTw && (
+                            <svg className="w-12 h-12 text-white/90 animate-pulse" fill="currentColor" viewBox="0 0 24 24">
+                              <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+                            </svg>
+                          )}
+                          {!isIg && !isTw && (
+                            <Play className="w-12 h-12 text-ink-400" />
+                          )}
+                        </div>
+                      )}
+
+                      {/* Dark gradient overlay */}
+                      <div className="absolute inset-0 bg-gradient-to-t from-ink-900/60 via-transparent to-transparent" />
+
+                      {/* Play button overlay */}
+                      <button
+                        onClick={() => setPlayingVideoId(item.id)}
+                        className="absolute inset-0 flex items-center justify-center cursor-pointer group/play"
+                      >
+                        <div className="w-14 h-14 rounded-full bg-ink-0/95 backdrop-blur-sm flex items-center justify-center shadow-2xl border border-ink-200/50 group-hover/play:scale-110 group-hover/play:bg-blue-600 group-hover/play:border-blue-500 transition-all duration-300">
+                          <Play className="w-6 h-6 text-ink-900 group-hover/play:text-ink-0 ml-0.5 transition-colors" fill="currentColor" />
+                        </div>
+                      </button>
+
+                      {/* Platform Tag */}
+                      <div className="absolute bottom-2 right-2 px-2 py-0.5 rounded bg-ink-900/80 text-ink-0 text-[9px] font-bold backdrop-blur-sm">
+                        {isIg ? 'Instagram' : isTw ? 'Twitter / X' : 'YouTube'}
                       </div>
-                    )}
-
-                    {/* Dark gradient overlay */}
-                    <div className="absolute inset-0 bg-gradient-to-t from-ink-900/60 via-transparent to-transparent" />
-
-                    {/* Play button overlay */}
-                    <button
-                      onClick={() => setPlayingVideoId(item.id)}
-                      className="absolute inset-0 flex items-center justify-center cursor-pointer group/play"
-                    >
-                      <div className="w-14 h-14 rounded-full bg-ink-0/95 backdrop-blur-sm flex items-center justify-center shadow-2xl border border-ink-200/50 group-hover/play:scale-110 group-hover/play:bg-blue-600 group-hover/play:border-blue-500 transition-all duration-300">
-                        <Play className="w-6 h-6 text-ink-900 group-hover/play:text-ink-0 ml-0.5 transition-colors" fill="currentColor" />
-                      </div>
-                    </button>
-
-                    {/* Platform Tag */}
-                    <div className="absolute bottom-2 right-2 px-2 py-0.5 rounded bg-ink-900/80 text-ink-0 text-[9px] font-bold backdrop-blur-sm">
-                      {isIg ? 'Instagram' : isTw ? 'Twitter / X' : 'YouTube'}
                     </div>
-                  </div>
 
-                  {/* Content Info */}
-                  <div className="p-5 flex-1 flex flex-col justify-between space-y-4">
-                    <div className="space-y-2">
-                      <h3 className="text-sm font-black tracking-tight text-ink-900 leading-snug">
-                        {item.title}
-                      </h3>
-                      {item.description && (
-                        <VideoDescription text={item.description} />
+                    {/* Content Info */}
+                    <div className="p-5 flex-grow flex flex-col justify-between space-y-4">
+                      <div className="space-y-2">
+                        <h3 className="text-sm font-black tracking-tight text-ink-900 leading-snug">
+                          {item.title}
+                        </h3>
+                        {item.description && (
+                          <VideoDescription 
+                            text={item.description}
+                            isExpanded={isExpanded}
+                            onToggleExpand={() => setExpandedItemId(isExpanded ? null : item.id)}
+                          />
+                        )}
+                      </div>
+
+                      {/* Redirect CTA */}
+                      {item.redirectUrl && (
+                        <div className="pt-2">
+                          <a
+                            href={item.redirectUrl}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="inline-flex items-center gap-1.5 text-[10px] font-black uppercase tracking-widest text-ink-700 hover:text-ink-900 transition-colors"
+                          >
+                            <span>{item.redirectLabel || 'Learn More'}</span>
+                            <ExternalLink className="w-3 h-3" />
+                          </a>
+                        </div>
                       )}
                     </div>
-
-                    {/* Redirect CTA */}
-                    {item.redirectUrl && (
-                      <div className="pt-2">
-                        <a
-                          href={item.redirectUrl}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="inline-flex items-center gap-1.5 text-[10px] font-black uppercase tracking-widest text-ink-700 hover:text-ink-900 transition-colors"
-                        >
-                          <span>{item.redirectLabel || 'Learn More'}</span>
-                          <ExternalLink className="w-3 h-3" />
-                        </a>
-                      </div>
-                    )}
-                  </div>
+                  </motion.div>
                 </div>
               );
             })}