first commit

resources/client/news/news-article-image.tsx

@@ -0,0 +1,50 @@
+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>
+  );
+}