first commit

resources/client/seasons/season-poster.tsx

@@ -0,0 +1,70 @@
+import {useTrans} from '@common/i18n/use-trans';
+import {message} from '@common/i18n/message';
+import clsx from 'clsx';
+import {ImageSize, useImageSrc} from '@app/images/use-image-src';
+import {Season} from '@app/titles/models/season';
+import {SeasonLink} from '@app/seasons/season-link';
+import {Title} from '@app/titles/models/title';
+import {Link} from 'react-router-dom';
+import {MovieIcon} from '@common/icons/material/Movie';
+
+interface Props {
+  title: Title;
+  season: Season;
+  className?: string;
+  size?: string;
+  lazy?: boolean;
+  srcSize?: ImageSize;
+  link?: string;
+}
+export function SeasonPoster({
+  title,
+  season,
+  className,
+  size = 'w-full',
+  srcSize,
+  lazy = true,
+  link,
+}: Props) {
+  const {trans} = useTrans();
+  const src = useImageSrc(season.poster || title.poster, {size: srcSize});
+
+  const imageClassName = clsx(
+    className,
+    size,
+    'object-cover bg-fg-base/4 aspect-poster 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('Poster for season :number of :title', {
+          values: {number: season.number, title: title.name},
+        })
+      )}
+    />
+  ) : (
+    <span className={imageClassName}>
+      <MovieIcon className="max-w-[60%] text-divider" size="text-6xl" />
+    </span>
+  );
+
+  return link ? (
+    <Link to={link} className="flex-shrink-0">
+      {image}
+    </Link>
+  ) : (
+    <SeasonLink
+      title={title}
+      seasonNumber={season.number}
+      className="flex-shrink-0"
+    >
+      {image}
+    </SeasonLink>
+  );
+}