51 lines
1.3 KiB
TypeScript
Executable File
51 lines
1.3 KiB
TypeScript
Executable File
import {useTrans} from '@common/i18n/use-trans';
|
|
import {message} from '@common/i18n/message';
|
|
import clsx from 'clsx';
|
|
import {NewsArticle} from '@app/titles/models/news-article';
|
|
import {NewsArticleLink} from '@app/news/news-article-link';
|
|
import {NewspaperIcon} from '@common/icons/material/Newspaper';
|
|
|
|
interface Props {
|
|
article: NewsArticle;
|
|
className?: string;
|
|
size?: string;
|
|
lazy?: boolean;
|
|
}
|
|
export function NewsArticleImage({
|
|
article,
|
|
className,
|
|
size,
|
|
lazy = true,
|
|
}: Props) {
|
|
const {trans} = useTrans();
|
|
const src = article.image;
|
|
|
|
const imageClassName = clsx(
|
|
className,
|
|
size,
|
|
'object-cover bg-fg-base/4 rounded',
|
|
!src ? 'flex items-center justify-center' : 'block'
|
|
);
|
|
|
|
const image = src ? (
|
|
<img
|
|
className={imageClassName}
|
|
draggable={false}
|
|
loading={lazy ? 'lazy' : 'eager'}
|
|
src={src}
|
|
alt={trans(message('Image for :name', {values: {name: article.title}}))}
|
|
/>
|
|
) : (
|
|
<span className={imageClassName}>
|
|
<NewspaperIcon className="max-w-[60%] text-divider" size="text-6xl" />
|
|
</span>
|
|
);
|
|
|
|
return (
|
|
<NewsArticleLink article={article} className="group relative flex-shrink-0">
|
|
{image}
|
|
<div className="pointer-events-none absolute inset-0 bg-black opacity-0 transition-opacity group-hover:opacity-10" />
|
|
</NewsArticleLink>
|
|
);
|
|
}
|