From c32c4b94998f23e549e588240dddbb241397e7c1 Mon Sep 17 00:00:00 2001
From: kenilkb <kenil@tech4biz.org>
Date: Thu, 16 Jul 2026 09:31:03 +0530
Subject: [PATCH] Feat: Implement dynamic webpage screenshot thumbnails for URL
 assets

---
 .../features/assets/components/AssetCard.tsx  | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/Channel-Frontend/src/features/assets/components/AssetCard.tsx b/Channel-Frontend/src/features/assets/components/AssetCard.tsx
index fa47ec2..3bb0f4c 100644
--- a/Channel-Frontend/src/features/assets/components/AssetCard.tsx
+++ b/Channel-Frontend/src/features/assets/components/AssetCard.tsx
@@ -249,6 +249,39 @@ export const AssetCard: React.FC<AssetCardProps> = ({
                 </div>
               }
             />
+          ) : asset.type === 'url' ? (
+            <div className="w-full h-full relative bg-ink-50">
+              <img 
+                src={`https://image.thum.io/get/width/400/crop/800/maxAge/12/${asset.url}`} 
+                alt={asset.title} 
+                className="w-full h-full object-cover object-top transition-transform duration-500 group-hover:scale-105"
+                onError={(e) => {
+                  e.currentTarget.style.display = 'none';
+                  const placeholder = document.getElementById(`fallback-${asset.id}`);
+                  if (placeholder) placeholder.style.display = 'flex';
+                }}
+              />
+              <div 
+                id={`fallback-${asset.id}`} 
+                className="absolute inset-0 flex items-center justify-center bg-ink-50"
+                style={{ display: 'none' }}
+              >
+                <div className="flex flex-col items-center justify-center w-full h-full p-4 bg-ink-500/[0.03] hover:bg-ink-500/[0.06] transition-colors">
+                  <div className="w-[105px] h-[135px] bg-ink-0 border border-ink-200 shadow-md rounded-lg flex flex-col justify-between p-3 relative overflow-hidden transition-all duration-300 group-hover:scale-105">
+                    <div className="absolute top-0 right-0 left-0 bg-ink-700 text-ink-0 py-1 text-[8px] font-extrabold uppercase text-center tracking-wider font-sans">
+                      Web Link
+                    </div>
+                    <div className="flex-grow flex items-center justify-center pt-4">
+                      <File className="w-8 h-8 text-ink-400" />
+                    </div>
+                    <div className="flex items-center justify-between text-[7px] text-ink-400 font-bold border-t border-ink-100 pt-1 mt-1 font-sans">
+                      <span>URL LINK</span>
+                      <span className="font-extrabold uppercase text-[6px]">HTML</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           ) : (
             <div 
               id={`fallback-${asset.id}`}