first commit

resources/client/people/known-for-compact.tsx

@@ -0,0 +1,33 @@
+import {Person} from '@app/titles/models/person';
+import {BulletSeparatedItems} from '@app/titles/bullet-separated-items';
+import {Trans} from '@common/i18n/trans';
+import {TitleLink} from '@app/titles/title-link';
+import {HTMLAttributeAnchorTarget} from 'react';
+import {BaseMediaLinkProps} from '@app/base-media-link';
+
+interface Props {
+  person: Person;
+  linkTarget?: HTMLAttributeAnchorTarget;
+  linkColor?: BaseMediaLinkProps['color'];
+}
+export function KnownForCompact({
+  person,
+  linkTarget,
+  linkColor = 'primary',
+}: Props) {
+  return (
+    <BulletSeparatedItems>
+      {person.known_for ? <Trans message={person.known_for} /> : null}
+      {person.primary_credit ? (
+        <TitleLink
+          target={linkTarget}
+          color={linkColor}
+          title={person.primary_credit}
+          onClick={e => {
+            e.stopPropagation();
+          }}
+        />
+      ) : null}
+    </BulletSeparatedItems>
+  );
+}