34 lines
785 B
TypeScript
34 lines
785 B
TypeScript
// Modules
|
|
import { LazyLoadImage } from "react-lazy-load-image-component";
|
|
import { Link } from "react-router-dom";
|
|
|
|
interface IProps {
|
|
type?: "small" | "big";
|
|
img: string;
|
|
title: string;
|
|
id: number;
|
|
}
|
|
|
|
const ContentItem = ({ type = "small", img, title, id }: IProps) => {
|
|
return (
|
|
<div className={`main-content-item main-content-item__${type}`}>
|
|
<LazyLoadImage
|
|
src={img}
|
|
alt={img}
|
|
effect="blur"
|
|
useIntersectionObserver
|
|
style={{
|
|
backgroundImage: `url(${img})`,
|
|
backgroundRepeat: "no-repeat",
|
|
backgroundSize: "cover",
|
|
}}
|
|
/>
|
|
<Link to={`/news/${id}`} className="main-content-item-overlay">
|
|
<h2>{title}</h2>
|
|
</Link>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ContentItem;
|