first commit

resources/client/titles/pages/title-page/title-credits-grid/title-credits-grid.tsx

@@ -0,0 +1,60 @@
+import {PersonPoster} from '@app/people/person-poster/person-poster';
+import {PersonLink} from '@app/people/person-link';
+import {TitleCredit} from '@app/titles/models/title';
+import clsx from 'clsx';
+import {Fragment} from 'react';
+import {Trans} from '@common/i18n/trans';
+
+interface Props {
+  credits: TitleCredit[];
+  className?: string;
+}
+export function TitleCreditsGrid({credits, className}: Props) {
+  if (!credits.length) {
+    return (
+      <div className="text-muted italic">
+        <Trans message="We've no cast information for this title yet." />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={clsx('grid gap-14 md:gap-20 title-credits-grid', className)}
+    >
+      {credits.map(credit => (
+        <div
+          key={credit.pivot.id}
+          className="flex items-center gap-14 md:gap-20"
+        >
+          <PersonPoster
+            rounded
+            person={credit}
+            size="w-70 md:w-96"
+            srcSize="md"
+          />
+          <div className="max-md:text-sm">
+            <PersonLink className="block font-bold" person={credit} />
+            <div className="text-muted">
+              <Description credit={credit} />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+interface DescriptionProps {
+  credit: TitleCredit;
+}
+function Description({credit}: DescriptionProps) {
+  if (credit.pivot.department === 'actors') {
+    return <Fragment>{credit.pivot.character}</Fragment>;
+  }
+  return (
+    <span className="capitalize">
+      <Trans message={credit.pivot.job} />
+    </span>
+  );
+}