first commit

resources/client/landing-page/landing-page-trending-titles.tsx

@@ -0,0 +1,66 @@
+import {getBootstrapData} from '@common/core/bootstrap-data/use-backend-bootstrap-data';
+import {Trans} from '@common/i18n/trans';
+import React from 'react';
+import {Title} from '@app/titles/models/title';
+import {useImageSrc} from '@app/images/use-image-src';
+import {message} from '@common/i18n/message';
+import {useTrans} from '@common/i18n/use-trans';
+import clsx from 'clsx';
+import {MovieIcon} from '@common/icons/material/Movie';
+
+export function LandingPageTrendingTitles() {
+  const titles = getBootstrapData().loaders?.landingPage?.trendingTitles;
+  if (!titles?.length) {
+    return null;
+  }
+
+  return (
+    <div className="landing-container mb-48 md:mb-80">
+      <div className="mb-48 mt-14 h-1 bg-divider md:mb-80" />
+      <h2 className="mb-34 text-center text-4xl">
+        <Trans message="See what's currently trending." />
+      </h2>
+      <div className="grid grid-cols-3 gap-24">
+        {titles.map(title => (
+          <TitleItem key={title.id} title={title} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface TitleItemProps {
+  title: Title;
+}
+function TitleItem({title}: TitleItemProps) {
+  const src = useImageSrc(title?.backdrop, {size: 'lg'});
+  const {trans} = useTrans();
+
+  const imageClassName = clsx(
+    'h-full w-full rounded bg-fg-base/4 object-cover',
+    !src ? 'flex items-center justify-center' : 'block'
+  );
+
+  const image = src ? (
+    <img
+      className={imageClassName}
+      draggable={false}
+      loading="lazy"
+      src={src}
+      alt={trans(message('Poster for :name', {values: {name: title.name}}))}
+    />
+  ) : (
+    <span className={imageClassName}>
+      <MovieIcon className="max-w-[60%] text-divider" size="text-6xl" />
+    </span>
+  );
+
+  return (
+    <div>
+      <div className="relative">{image}</div>
+      <div className="mt-10 text-center text-base font-medium">
+        {title.name}
+      </div>
+    </div>
+  );
+}