first commit

resources/client/channels/content-grid/title-grid-item.tsx

@@ -0,0 +1,86 @@
+import {Title} from '@app/titles/models/title';
+import {TitlePoster} from '@app/titles/title-poster/title-poster';
+import {TitleRating} from '@app/reviews/title-rating';
+import {TitleLink} from '@app/titles/title-link';
+import {ReactNode} from 'react';
+import {TitleBackdrop} from '@app/titles/title-poster/title-backdrop';
+import {BulletSeparatedItems} from '@app/titles/bullet-separated-items';
+import {FormattedDate} from '@common/i18n/formatted-date';
+
+export interface TitlePortraitGridItemProps {
+  item: Title;
+  rating?: number;
+  description?: ReactNode;
+}
+export function TitlePortraitGridItem({
+  item,
+  rating,
+  description,
+}: TitlePortraitGridItemProps) {
+  return (
+    <div>
+      <div className="relative">
+        <TitlePoster title={item} srcSize="md" showPlayButton />
+      </div>
+      <div className="mt-10 text-sm">
+        <RatingOrReleaseDate title={item} rating={rating} className="mb-4" />
+        <TitleLink title={item} className="block text-base font-medium" />
+        {description ? <div className="mt-4">{description}</div> : null}
+      </div>
+    </div>
+  );
+}
+
+export function TitleLandscapeGridItem({item}: TitlePortraitGridItemProps) {
+  return (
+    <div>
+      <TitleBackdrop
+        title={item}
+        srcSize="lg"
+        size="w-full"
+        className="rounded"
+        wrapWithLink
+        showPlayButton
+      />
+      <div className="mt-10 text-sm">
+        <TitleLink
+          title={item}
+          className="mb-4 block text-base font-semibold"
+        />
+        <BulletSeparatedItems className="mb-4">
+          {item.release_date && <FormattedDate date={item.release_date} />}
+          {item.certification && (
+            <div className="uppercase">{item.certification}</div>
+          )}
+        </BulletSeparatedItems>
+        <TitleRating score={item.rating} className="mb-4" />
+      </div>
+    </div>
+  );
+}
+
+interface RatingOrReleaseDateProps {
+  title: Title;
+  rating?: number;
+  className?: string;
+}
+function RatingOrReleaseDate({
+  title,
+  rating,
+  className,
+}: RatingOrReleaseDateProps) {
+  if (!rating) {
+    rating = title.rating;
+  }
+  if (rating) {
+    return <TitleRating score={rating} className={className} />;
+  }
+  if (title.release_date) {
+    return (
+      <div className={className}>
+        <FormattedDate date={title.release_date} />
+      </div>
+    );
+  }
+  return null;
+}