Feat: Implement dynamic, full-bleed mockup previews for presentation, spreadsheet, and word documents
This commit is contained in:
kenilkb
parent
e6d3d07fd4
commit
6a22f954c7
@ -318,59 +318,130 @@ export const AssetCard: React.FC<AssetCardProps> = ({
|
||||
) : (
|
||||
<div
|
||||
id={`fallback-${asset.id}`}
|
||||
className="w-full h-full flex items-center justify-center bg-ink-50"
|
||||
className="w-full h-full flex items-center justify-center bg-ink-50 relative overflow-hidden"
|
||||
>
|
||||
{isPresentation ? (
|
||||
<div className="flex flex-col items-center justify-center w-full h-full p-4 bg-amber-500/[0.03] hover:bg-amber-500/[0.06] transition-colors">
|
||||
<div className="w-[125px] h-[90px] bg-amber-500 border border-amber-600 shadow-md rounded-lg flex flex-col justify-between p-2.5 relative overflow-hidden transition-all duration-300 group-hover:scale-105">
|
||||
<div className="h-2 bg-ink-0/90 rounded w-3/4 mb-1" />
|
||||
<div className="space-y-1 flex-grow">
|
||||
<div className="h-1 bg-ink-0/60 rounded w-full" />
|
||||
<div className="h-1 bg-ink-0/60 rounded w-11/12" />
|
||||
<div className="h-1 bg-ink-0/60 rounded w-10/12" />
|
||||
<div className="w-full h-full flex bg-slate-900 border border-slate-800 text-left select-none relative overflow-hidden">
|
||||
{/* Left slide thumbnails rail */}
|
||||
<div className="w-10 bg-slate-950 border-r border-slate-850 flex flex-col items-center py-2 gap-1.5 shrink-0">
|
||||
<div className="w-7 h-5 rounded bg-amber-600/30 border border-amber-500/50 flex items-center justify-center text-[7px] text-amber-500 font-bold">1</div>
|
||||
<div className="w-7 h-5 rounded bg-slate-850 border border-slate-750 flex items-center justify-center text-[7px] text-slate-500">2</div>
|
||||
<div className="w-7 h-5 rounded bg-slate-850 border border-slate-750 flex items-center justify-center text-[7px] text-slate-500">3</div>
|
||||
</div>
|
||||
{/* Main slide content area */}
|
||||
<div className="flex-1 bg-gradient-to-tr from-slate-950 via-slate-900 to-amber-950/60 p-3.5 flex flex-col justify-between relative">
|
||||
<div className="space-y-1.5 mt-2 relative z-10">
|
||||
<span className="inline-flex px-1.5 py-0.5 rounded text-[7px] font-extrabold uppercase bg-amber-500 text-slate-950 tracking-wider">
|
||||
Slide Show
|
||||
</span>
|
||||
<h4 className="text-[11px] font-extrabold text-white leading-tight font-sans line-clamp-2 mt-1">
|
||||
{asset.title}
|
||||
</h4>
|
||||
<div className="space-y-1 pt-1.5">
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="w-1 h-1 rounded-full bg-amber-500" />
|
||||
<div className="h-1 bg-white/20 rounded w-5/6" />
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="w-1 h-1 rounded-full bg-amber-500" />
|
||||
<div className="h-1 bg-white/20 rounded w-3/4" />
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="w-1 h-1 rounded-full bg-amber-500" />
|
||||
<div className="h-1 bg-white/10 rounded w-4/6" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-[7px] text-ink-0/80 font-bold pt-1 border-t border-amber-400">
|
||||
<span>PRESENTATION</span>
|
||||
<span className="font-extrabold uppercase">PPTX</span>
|
||||
{/* Slide Footer */}
|
||||
<div className="flex items-center justify-between text-[7px] text-slate-405 font-bold border-t border-slate-800/80 pt-1.5 mt-auto relative z-10 font-mono">
|
||||
<span>KEYNOTE PRESENTATION</span>
|
||||
<span className="font-extrabold text-amber-550 text-[6px]">PPTX</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : isWord ? (
|
||||
<div className="flex flex-col items-center justify-center w-full h-full p-4 bg-blue-500/[0.03] hover:bg-blue-500/[0.06] transition-colors">
|
||||
<div className="w-[105px] h-[135px] bg-ink-0 border border-blue-500/20 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-blue-600 text-ink-0 py-1 text-[8px] font-extrabold uppercase text-center tracking-wider font-sans">
|
||||
Word Doc
|
||||
</div>
|
||||
<div className="space-y-1.5 mt-6 flex-grow pt-1">
|
||||
<div className="h-1 bg-ink-200 rounded w-11/12" />
|
||||
<div className="h-1 bg-ink-200 rounded w-full" />
|
||||
<div className="h-1 bg-ink-250 rounded w-10/12" />
|
||||
<div className="h-1 bg-ink-200 rounded w-full" />
|
||||
</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>DOCX RESOURCE</span>
|
||||
<FileText className="w-3 h-3 text-blue-650" />
|
||||
<div className="w-full h-full bg-white border border-slate-200 text-left select-none relative overflow-hidden p-3.5 flex flex-col justify-between">
|
||||
{/* Document Margins decorative elements */}
|
||||
<div className="absolute top-0 right-0 left-0 h-1 bg-indigo-600" />
|
||||
|
||||
{/* Word Header */}
|
||||
<div className="flex justify-between items-center text-[7px] text-slate-400 font-bold tracking-wide border-b border-slate-100 pb-1.5">
|
||||
<span>PARTNER ASSET LIBRARY</span>
|
||||
<span className="font-extrabold text-indigo-650">DOCX</span>
|
||||
</div>
|
||||
|
||||
{/* Page Title & Body Text Mockup */}
|
||||
<div className="space-y-2 flex-grow mt-3">
|
||||
<h4 className="text-[11px] font-extrabold text-slate-900 leading-snug font-sans line-clamp-2">
|
||||
{asset.title}
|
||||
</h4>
|
||||
<div className="space-y-1.5">
|
||||
<div className="h-1.5 bg-slate-100 rounded w-full" />
|
||||
<div className="h-1.5 bg-slate-100 rounded w-11/12" />
|
||||
<div className="h-1.5 bg-slate-100 rounded w-full" />
|
||||
<div className="h-1.5 bg-slate-50 rounded w-3/4" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Signature / Metadata stamp at the bottom */}
|
||||
<div className="flex items-center justify-between text-[7px] text-slate-400 font-bold border-t border-slate-100 pt-1.5 mt-auto font-mono">
|
||||
<span>PAGE 1 OF 1</span>
|
||||
<span className="text-slate-350">CONFIDENTIAL</span>
|
||||
</div>
|
||||
</div>
|
||||
) : isSpreadsheet ? (
|
||||
<div className="flex flex-col items-center justify-center w-full h-full p-4 bg-emerald-500/[0.03] hover:bg-emerald-500/[0.06] transition-colors">
|
||||
<div className="w-[115px] h-[90px] bg-ink-0 border border-emerald-500/20 shadow-md rounded-lg flex flex-col justify-between p-2 relative overflow-hidden transition-all duration-300 group-hover:scale-105">
|
||||
<div className="absolute top-0 right-0 left-0 bg-emerald-650 text-ink-0 py-1 text-[7px] font-extrabold uppercase text-center tracking-wider font-sans">
|
||||
Spreadsheet
|
||||
<div className="w-full h-full bg-white border border-slate-200 text-left select-none relative overflow-hidden flex flex-col justify-between">
|
||||
{/* Excel Top Bar */}
|
||||
<div className="h-5 bg-emerald-700 border-b border-emerald-800 flex items-center px-2 shrink-0 justify-between select-none">
|
||||
<span className="text-[8px] font-extrabold text-white tracking-wider">Spreadsheet Editor</span>
|
||||
<span className="text-[6px] font-extrabold text-emerald-100 bg-emerald-800/80 px-1 py-0.5 rounded uppercase">XLSX</span>
|
||||
</div>
|
||||
|
||||
{/* Sheet Grid Layout */}
|
||||
<div className="flex-1 flex flex-col min-h-0 bg-white font-mono text-[6px]">
|
||||
{/* Headers Row */}
|
||||
<div className="h-4 bg-slate-100 border-b border-slate-200 flex shrink-0">
|
||||
<div className="w-6 border-r border-slate-200 bg-slate-150 flex items-center justify-center text-slate-500 font-bold shrink-0"></div>
|
||||
<div className="flex-1 border-r border-slate-200 flex items-center justify-center text-slate-500 font-bold">A</div>
|
||||
<div className="flex-1 border-r border-slate-200 flex items-center justify-center text-slate-500 font-bold">B</div>
|
||||
<div className="flex-1 border-r border-slate-200 flex items-center justify-center text-slate-500 font-bold">C</div>
|
||||
<div className="flex-1 flex items-center justify-center text-slate-500 font-bold">D</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-1 mt-5 flex-grow pt-1">
|
||||
<div className="h-2 bg-emerald-50 border border-emerald-100 rounded" />
|
||||
<div className="h-2 bg-emerald-50 border border-emerald-100 rounded" />
|
||||
<div className="h-2 bg-emerald-50 border border-emerald-100 rounded" />
|
||||
<div className="h-2 bg-ink-50 border border-ink-100 rounded" />
|
||||
<div className="h-2 bg-ink-50 border border-ink-100 rounded" />
|
||||
<div className="h-2 bg-ink-50 border border-ink-100 rounded" />
|
||||
{/* Grid Rows */}
|
||||
<div className="flex-1 flex flex-col divide-y divide-slate-100">
|
||||
{/* Row 1 - Title */}
|
||||
<div className="h-4 flex items-center bg-emerald-500/5 divide-x divide-slate-100">
|
||||
<div className="w-6 bg-slate-100 flex items-center justify-center text-slate-500 font-bold shrink-0">1</div>
|
||||
<div className="flex-1 px-1 font-bold text-emerald-900 truncate">
|
||||
{asset.title}
|
||||
</div>
|
||||
</div>
|
||||
{/* Row 2 - Headers */}
|
||||
<div className="h-4 flex items-center bg-slate-50 divide-x divide-slate-100">
|
||||
<div className="w-6 bg-slate-100 flex items-center justify-center text-slate-500 font-bold shrink-0">2</div>
|
||||
<div className="flex-1 px-1 font-bold text-slate-700 truncate">Category</div>
|
||||
<div className="flex-1 px-1 font-bold text-slate-700 truncate">Date</div>
|
||||
<div className="flex-1 px-1 font-bold text-slate-700 truncate">Size</div>
|
||||
<div className="flex-1 px-1 font-bold text-slate-700 truncate">Status</div>
|
||||
</div>
|
||||
{/* Row 3 - Data */}
|
||||
<div className="h-4 flex items-center divide-x divide-slate-100">
|
||||
<div className="w-6 bg-slate-100 flex items-center justify-center text-slate-500 font-bold shrink-0">3</div>
|
||||
<div className="flex-1 px-1 text-slate-600 truncate">{asset.categoryId || 'General'}</div>
|
||||
<div className="flex-1 px-1 text-slate-600 truncate">{new Date(asset.createdAt).toLocaleDateString()}</div>
|
||||
<div className="flex-1 px-1 text-slate-600 truncate">{formatBytes(asset.size)}</div>
|
||||
<div className="flex-1 px-1 text-emerald-650 font-bold truncate">Published</div>
|
||||
</div>
|
||||
</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>XLSX SHEET</span>
|
||||
<span className="font-extrabold text-emerald-650 text-[6px]">EXCEL</span>
|
||||
</div>
|
||||
|
||||
{/* Excel Sheet Tab Footer */}
|
||||
<div className="h-4 bg-slate-50 border-t border-slate-200 flex items-center px-2 shrink-0 select-none justify-between">
|
||||
<div className="flex gap-1">
|
||||
<span className="text-[6px] font-extrabold text-emerald-700 bg-white border-x border-t border-slate-200 px-1.5 py-0.5 rounded-t select-none leading-none">Sheet1</span>
|
||||
<span className="text-[6px] text-slate-400 px-1 py-0.5 select-none leading-none">Sheet2</span>
|
||||
</div>
|
||||
<span className="text-[5px] text-slate-350 font-bold">READY</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user