first commit

resources/client/titles/compact-credits.tsx

@@ -0,0 +1,96 @@
+import {memo, ReactNode} from 'react';
+import {Trans} from '@common/i18n/trans';
+import {BulletSeparatedItems} from '@app/titles/bullet-separated-items';
+import {PersonLink} from '@app/people/person-link';
+import {GroupTitleCredits} from '@app/titles/requests/use-title';
+
+interface Props {
+  credits: GroupTitleCredits | undefined;
+}
+export const CompactCredits = memo(({credits = {}}: Props) => (
+  <div className="mt-16 flex flex-col gap-14 border-t pt-16">
+    {credits.creators?.length ? (
+      <PeopleDetail label={<Trans message="Created by" />}>
+        <BulletSeparatedItems className="hidden-scrollbar overflow-x-auto">
+          {credits.creators.slice(0, 3).map(creator => (
+            <PersonLink
+              person={creator}
+              key={creator.id}
+              color="primary"
+              className="whitespace-nowrap"
+            />
+          ))}
+        </BulletSeparatedItems>
+      </PeopleDetail>
+    ) : null}
+    {credits.directing?.length ? (
+      <PeopleDetail
+        label={
+          <Trans
+            message="[one Director|other Directors]"
+            values={{count: credits.directing.length}}
+          />
+        }
+      >
+        <BulletSeparatedItems className="hidden-scrollbar overflow-x-auto">
+          {credits.directing.slice(0, 3).map(director => (
+            <PersonLink
+              person={director}
+              key={director.id}
+              color="primary"
+              className="whitespace-nowrap"
+            />
+          ))}
+        </BulletSeparatedItems>
+      </PeopleDetail>
+    ) : null}
+    {credits.writing?.length ? (
+      <PeopleDetail
+        label={
+          <Trans
+            message="[one Writer|other Writers]"
+            values={{count: credits.writing.length}}
+          />
+        }
+      >
+        <BulletSeparatedItems className="hidden-scrollbar overflow-x-auto">
+          {credits.writing.slice(0, 3).map(writer => (
+            <PersonLink
+              person={writer}
+              key={writer.id}
+              color="primary"
+              className="whitespace-nowrap"
+            />
+          ))}
+        </BulletSeparatedItems>
+      </PeopleDetail>
+    ) : null}
+    {credits.actors?.length ? (
+      <PeopleDetail label={<Trans message="Stars" />}>
+        <BulletSeparatedItems className="hidden-scrollbar overflow-x-auto">
+          {credits.actors.slice(0, 3).map(actor => (
+            <PersonLink
+              person={actor}
+              key={actor.id}
+              color="primary"
+              className="whitespace-nowrap"
+            />
+          ))}
+        </BulletSeparatedItems>
+      </PeopleDetail>
+    ) : null}
+  </div>
+));
+
+interface PeopleDetailProps {
+  label: ReactNode;
+  children: ReactNode;
+}
+function PeopleDetail({label, children}: PeopleDetailProps) {
+  return (
+    <div className="flex-shrink-0 gap-24 md:flex">
+      <div className="min-w-84 font-bold">{label}</div>
+      <div>{children}</div>
+    </div>
+  );
+}