first commit

resources/client/titles/pages/title-page/title-page-header.tsx

@@ -0,0 +1,40 @@
+import {InteractableRating} from '@app/reviews/interactable-rating';
+import {Title} from '@app/titles/models/title';
+import {TitlePageHeaderLayout} from '@app/titles/pages/title-page/title-page-header-layout';
+import {FormattedDate} from '@common/i18n/formatted-date';
+import {FormattedDuration} from '@common/i18n/formatted-duration';
+import {BulletSeparatedItems} from '@app/titles/bullet-separated-items';
+import {TitlePoster} from '@app/titles/title-poster/title-poster';
+import {TitleLink} from '@app/titles/title-link';
+import React from 'react';
+
+interface Props {
+  title: Title;
+  showPoster?: boolean;
+}
+export function TitlePageHeader({title, showPoster = false}: Props) {
+  return (
+    <TitlePageHeaderLayout
+      name={<TitleLink title={title} />}
+      poster={
+        showPoster ? (
+          <TitlePoster title={title} size="w-80" srcSize="sm" />
+        ) : null
+      }
+      description={
+        <div>
+          <BulletSeparatedItems>
+            <FormattedDate date={title.release_date} />
+            {title.certification && (
+              <div className="uppercase">{title.certification}</div>
+            )}
+            {title.runtime && (
+              <FormattedDuration minutes={title.runtime} verbose />
+            )}
+          </BulletSeparatedItems>
+        </div>
+      }
+      right={<InteractableRating title={title} />}
+    />
+  );
+}