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

Feat: Implement dynamic webpage screenshot thumbnails for URL assets

Browse Source
This commit is contained in:
kenilkb 2026-07-16 09:31:03 +05:30
parent 5ec1faa1f9
commit c32c4b9499
1 changed files with 33 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
Channel-Frontend/src/features/assets/components/AssetCard.tsx
View File

@ -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}`}