57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
|
|
interface NewsCardPreviewProps {
|
|
title: string;
|
|
date: string;
|
|
imageUrl?: string;
|
|
logoUrl?: string;
|
|
}
|
|
|
|
const NewsCardPreview: React.FC<NewsCardPreviewProps> = ({ title, date, imageUrl, logoUrl }) => {
|
|
return (
|
|
<div className="relative w-full aspect-square max-w-[540px] mx-auto overflow-hidden rounded-lg shadow-2xl bg-gray-900 font-sans">
|
|
{/* Background Image */}
|
|
{imageUrl ? (
|
|
<img
|
|
src={imageUrl}
|
|
alt="News background"
|
|
className="absolute inset-0 w-full h-full object-cover"
|
|
/>
|
|
) : (
|
|
<div className="absolute inset-0 bg-gradient-to-br from-slate-800 to-slate-900 flex items-center justify-center">
|
|
<span className="text-slate-700 text-6xl font-bold uppercase tracking-widest opacity-20">News Card</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Dark Overlay */}
|
|
<div className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black via-black/70 to-transparent" />
|
|
|
|
{/* Logo */}
|
|
<div className="absolute top-6 left-6">
|
|
{logoUrl ? (
|
|
<img src={logoUrl} alt="Logo" className="w-16 h-16 object-contain" />
|
|
) : (
|
|
<div className="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-2xl shadow-lg border-2 border-white/20">
|
|
N
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="absolute bottom-10 left-8 right-8 text-white">
|
|
<div className="mb-2 text-sm font-medium tracking-wider text-blue-400 uppercase">
|
|
{date}
|
|
</div>
|
|
<h2 className="text-2xl md:text-3xl font-bold leading-tight line-clamp-3 drop-shadow-md">
|
|
{title}
|
|
</h2>
|
|
</div>
|
|
|
|
{/* Bottom Border Accent */}
|
|
<div className="absolute bottom-0 inset-x-0 h-1.5 bg-blue-600" />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NewsCardPreview;
|