Extend person page with external links

src/components/ExternalLinkBlock/ExternalLinkBlockContainer.tsx

@@ -0,0 +1,10 @@
+import type { ExternalLinkBlockProps } from '@app/components/ExternalLinkBlock/ExternalLinkBlockItems';
+import { ExternalLinkBlockItems } from '@app/components/ExternalLinkBlock/ExternalLinkBlockItems';
+
+export const ExternalLinkBlockContainer = (props: ExternalLinkBlockProps) => {
+  return (
+    <div className="flex w-full items-center justify-center space-x-5">
+      <ExternalLinkBlockItems {...props} />
+    </div>
+  );
+};

src/components/ExternalLinkBlock/ExternalLinkBlockItems.tsx

@@ -0,0 +1,106 @@
+import ImdbLogo from '@app/assets/services/imdb.svg';
+import PlexLogo from '@app/assets/services/plex.svg';
+import RTLogo from '@app/assets/services/rt.svg';
+import TmdbLogo from '@app/assets/services/tmdb.svg';
+import TraktLogo from '@app/assets/services/trakt.svg';
+import TvdbLogo from '@app/assets/services/tvdb.svg';
+import useLocale from '@app/hooks/useLocale';
+import { MediaType } from '@server/constants/media';
+
+export interface ExternalLinkBlockProps {
+  mediaType: 'movie' | 'tv' | 'person';
+  tmdbId?: number;
+  tvdbId?: number;
+  imdbId?: string;
+  rtUrl?: string;
+  plexUrl?: string;
+  left?: boolean;
+}
+
+export const ExternalLinkBlockItems = ({
+  mediaType,
+  tmdbId,
+  tvdbId,
+  imdbId,
+  rtUrl,
+  plexUrl,
+}: ExternalLinkBlockProps) => {
+  const { locale } = useLocale();
+
+  return (
+    <>
+      {plexUrl && (
+        <a
+          href={plexUrl}
+          className="w-12 opacity-50 transition duration-300 hover:opacity-100"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <PlexLogo />
+        </a>
+      )}
+      {tmdbId && (
+        <a
+          href={`https://www.themoviedb.org/${mediaType}/${tmdbId}?language=${locale}`}
+          className="w-8 opacity-50 transition duration-300 hover:opacity-100"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <TmdbLogo />
+        </a>
+      )}
+      {tvdbId && mediaType === MediaType.TV && (
+        <a
+          href={`http://www.thetvdb.com/?tab=series&id=${tvdbId}`}
+          className="w-9 opacity-50 transition duration-300 hover:opacity-100"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <TvdbLogo />
+        </a>
+      )}
+      {imdbId && mediaType === 'person' && (
+        <a
+          href={`https://www.imdb.com/name/${imdbId}`}
+          className="w-8 opacity-50 transition duration-300 hover:opacity-100"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <ImdbLogo />
+        </a>
+      )}
+      {imdbId && mediaType !== 'person' && (
+        <a
+          href={`https://www.imdb.com/title/${imdbId}`}
+          className="w-8 opacity-50 transition duration-300 hover:opacity-100"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <ImdbLogo />
+        </a>
+      )}
+      {rtUrl && (
+        <a
+          href={rtUrl}
+          className="w-14 opacity-50 transition duration-300 hover:opacity-100"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <RTLogo />
+        </a>
+      )}
+      {tmdbId && mediaType !== 'person' && (
+        <a
+          href={`https://trakt.tv/search/tmdb/${tmdbId}?id_type=${
+            mediaType === 'movie' ? 'movie' : 'show'
+          }`}
+          className="w-8 opacity-50 transition duration-300 hover:opacity-100"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <TraktLogo />
+        </a>
+      )}
+    </>
+  );
+};

src/components/ExternalLinkBlock/index.tsx

@@ -1,97 +1,3 @@
-import ImdbLogo from '@app/assets/services/imdb.svg';
-import PlexLogo from '@app/assets/services/plex.svg';
-import RTLogo from '@app/assets/services/rt.svg';
-import TmdbLogo from '@app/assets/services/tmdb.svg';
-import TraktLogo from '@app/assets/services/trakt.svg';
-import TvdbLogo from '@app/assets/services/tvdb.svg';
-import useLocale from '@app/hooks/useLocale';
-import { MediaType } from '@server/constants/media';
-
-interface ExternalLinkBlockProps {
-  mediaType: 'movie' | 'tv';
-  tmdbId?: number;
-  tvdbId?: number;
-  imdbId?: string;
-  rtUrl?: string;
-  plexUrl?: string;
-}
-
-const ExternalLinkBlock = ({
-  mediaType,
-  tmdbId,
-  tvdbId,
-  imdbId,
-  rtUrl,
-  plexUrl,
-}: ExternalLinkBlockProps) => {
-  const { locale } = useLocale();
-
-  return (
-    <div className="flex w-full items-center justify-center space-x-5">
-      {plexUrl && (
-        <a
-          href={plexUrl}
-          className="w-12 opacity-50 transition duration-300 hover:opacity-100"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <PlexLogo />
-        </a>
-      )}
-      {tmdbId && (
-        <a
-          href={`https://www.themoviedb.org/${mediaType}/${tmdbId}?language=${locale}`}
-          className="w-8 opacity-50 transition duration-300 hover:opacity-100"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <TmdbLogo />
-        </a>
-      )}
-      {tvdbId && mediaType === MediaType.TV && (
-        <a
-          href={`http://www.thetvdb.com/?tab=series&id=${tvdbId}`}
-          className="w-9 opacity-50 transition duration-300 hover:opacity-100"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <TvdbLogo />
-        </a>
-      )}
-      {imdbId && (
-        <a
-          href={`https://www.imdb.com/title/${imdbId}`}
-          className="w-8 opacity-50 transition duration-300 hover:opacity-100"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <ImdbLogo />
-        </a>
-      )}
-      {rtUrl && (
-        <a
-          href={rtUrl}
-          className="w-14 opacity-50 transition duration-300 hover:opacity-100"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <RTLogo />
-        </a>
-      )}
-      {tmdbId && (
-        <a
-          href={`https://trakt.tv/search/tmdb/${tmdbId}?id_type=${
-            mediaType === 'movie' ? 'movie' : 'show'
-          }`}
-          className="w-8 opacity-50 transition duration-300 hover:opacity-100"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <TraktLogo />
-        </a>
-      )}
-    </div>
-  );
-};
+import { ExternalLinkBlockContainer as ExternalLinkBlock } from '@app/components/ExternalLinkBlock/ExternalLinkBlockContainer';
 
 export default ExternalLinkBlock;

src/components/PersonDetails/index.tsx

@@ -3,6 +3,7 @@ import CachedImage from '@app/components/Common/CachedImage';
 import ImageFader from '@app/components/Common/ImageFader';
 import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import PageTitle from '@app/components/Common/PageTitle';
+import { ExternalLinkBlockItems } from '@app/components/ExternalLinkBlock/ExternalLinkBlockItems';
 import TitleCard from '@app/components/TitleCard';
 import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
@@ -247,6 +248,13 @@ const PersonDetails = () => {
                 })}
               </div>
             )}
+            <div className="media-fact flex items-center justify-center space-x-5 lg:w-full lg:justify-start">
+              <ExternalLinkBlockItems
+                mediaType="person"
+                imdbId={data.imdbId}
+                tmdbId={Number(router.query.personId as string)}
+              />
+            </div>
           </div>
           {data.biography && (
             <div className="relative text-left">