Yaseen/Tech4biz-channel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor showcase cards to use absolute grid overlay expansion system

Browse Source
This commit is contained in:
kenilkb 2026-07-17 16:21:29 +05:30
parent a1626a5c20
commit 9646309a0a
1 changed files with 101 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

184
Channel-Frontend/src/pages/ShowcasePage.tsx
View File

@ -100,8 +100,13 @@ const TwitterEmbed: React.FC<{ url: string }> = ({ url }) => {
}; };
// ── Collapsible Video Description Component ── // ── Collapsible Video Description Component ──
const VideoDescription: React.FC<{ text: string }> = ({ text }) => { interface VideoDescriptionProps {
const [isExpanded, setIsExpanded] = useState(false); text: string;
isExpanded: boolean;
onToggleExpand: () => void;
}
const VideoDescription: React.FC<VideoDescriptionProps> = ({ text, isExpanded, onToggleExpand }) => {
const shouldCollapse = text.length > 180 || text.includes('\n'); const shouldCollapse = text.length > 180 || text.includes('\n');
return ( return (
@ -118,7 +123,7 @@ const VideoDescription: React.FC<{ text: string }> = ({ text }) => {
<button <button
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); 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" 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 [items, setItems] = useState<ContentShowcase[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [playingVideoId, setPlayingVideoId] = useState<string | null>(null); const [playingVideoId, setPlayingVideoId] = useState<string | null>(null);
const [expandedItemId, setExpandedItemId] = useState<string | null>(null);
// Resizable Lightbox state: compact | theater | cinema // Resizable Lightbox state: compact | theater | cinema
const [lightboxSize, setLightboxSize] = useState<'compact' | 'theater' | 'cinema'>('compact'); 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> <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>
) : ( ) : (
<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) => { {items.map((item) => {
const ytId = extractYouTubeVideoId(item.youtubeUrl); const ytId = extractYouTubeVideoId(item.youtubeUrl);
const isIg = item.youtubeUrl.includes('instagram.com'); const isIg = item.youtubeUrl.includes('instagram.com');
const isTw = item.youtubeUrl.includes('twitter.com') || item.youtubeUrl.includes('x.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 thumbnail = item.thumbnailUrl || (ytId ? `https://img.youtube.com/vi/${ytId}/hqdefault.jpg` : null);
const isExpanded = expandedItemId === item.id;
return ( return (
<div <div key={item.id} className="relative min-h-[400px]">
key={item.id} <motion.div
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" layout
> transition={{ type: "spring", stiffness: 320, damping: 28 }}
{/* Video Player / Thumbnail */} className={`group flex flex-col bg-ink-0 border rounded-2xl overflow-hidden transition-all duration-300 ${
<div className="relative aspect-video bg-ink-900 overflow-hidden"> isExpanded
{thumbnail ? ( ? 'absolute z-20 top-0 left-0 right-0 h-auto shadow-2xl border-ink-350 bg-ink-0'
<img : 'relative w-full h-full border-ink-200 hover:border-ink-350 hover:shadow-xl'
src={thumbnail} }`}
alt={item.title} >
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" {/* Video Player / Thumbnail */}
/> <div className="relative aspect-video bg-ink-900 overflow-hidden shrink-0">
) : ( {thumbnail ? (
/* Platform Fallback Gradients */ <img
<div className={`w-full h-full flex items-center justify-center ${ src={thumbnail}
isIg alt={item.title}
? 'bg-gradient-to-tr from-yellow-500 via-pink-500 to-purple-600' className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
: isTw />
? 'bg-ink-950' ) : (
: 'bg-ink-100' /* Platform Fallback Gradients */
}`}> <div className={`w-full h-full flex items-center justify-center ${
{isIg && ( isIg
<svg className="w-12 h-12 text-white/90 animate-pulse" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24"> ? 'bg-gradient-to-tr from-yellow-500 via-pink-500 to-purple-600'
<rect x="2" y="2" width="20" height="20" rx="5" ry="5" /> : isTw
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z" /> ? 'bg-ink-950'
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" /> : 'bg-ink-100'
</svg> }`}>
)} {isIg && (
{isTw && ( <svg className="w-12 h-12 text-white/90 animate-pulse" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
<svg className="w-12 h-12 text-white/90 animate-pulse" fill="currentColor" viewBox="0 0 24 24"> <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
<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" /> <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z" />
</svg> <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
)} </svg>
{!isIg && !isTw && ( )}
<Play className="w-12 h-12 text-ink-400" /> {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> </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>
</div>
{/* Content Info */} {/* Content Info */}
<div className="p-5 flex-1 flex flex-col justify-between space-y-4"> <div className="p-5 flex-grow flex flex-col justify-between space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<h3 className="text-sm font-black tracking-tight text-ink-900 leading-snug"> <h3 className="text-sm font-black tracking-tight text-ink-900 leading-snug">
{item.title} {item.title}
</h3> </h3>
{item.description && ( {item.description && (
<VideoDescription text={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> </div>
</motion.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>
</div> </div>
); );
})} })}