feat(frontend): add external links to movie and tv detail pages

Author: sct

src/assets/services/imdb.svg

@@ -0,0 +1,55 @@
+import React from 'react';
+import TmdbLogo from '../../assets/services/tmdb.svg';
+import ImdbLogo from '../../assets/services/imdb.svg';
+import RTLogo from '../../assets/services/rt.svg';
+
+interface ExternalLinkBlockProps {
+  mediaType: 'movie' | 'tv';
+  imdbId?: string;
+  tmdbId?: number;
+  rtUrl?: string;
+}
+
+const ExternalLinkBlock: React.FC<ExternalLinkBlockProps> = ({
+  imdbId,
+  tmdbId,
+  rtUrl,
+  mediaType,
+}) => {
+  return (
+    <div className="flex justify-end items-center">
+      {tmdbId && (
+        <a
+          href={`https://www.themoviedb.org/${mediaType}/${tmdbId}`}
+          className="w-8 mx-2 opacity-50 hover:opacity-100 transition duration-300"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <TmdbLogo />
+        </a>
+      )}
+      {imdbId && (
+        <a
+          href={`https://www.imdb.com/title/${imdbId}`}
+          className="w-8 mx-2 opacity-50 hover:opacity-100 transition duration-300"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <ImdbLogo />
+        </a>
+      )}
+      {rtUrl && (
+        <a
+          href={`${rtUrl}`}
+          className="w-14 mx-2 opacity-50 hover:opacity-100 transition duration-300"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <RTLogo />
+        </a>
+      )}
+    </div>
+  );
+};
+
+export default ExternalLinkBlock;

src/assets/services/rt.svg

@@ -37,6 +37,7 @@ import type { RTRating } from '../../../server/api/rottentomatoes';
 import Error from '../../pages/_error';
 import Head from 'next/head';
 import globalMessages from '../../i18n/globalMessages';
+import ExternalLinkBlock from '../ExternalLinkBlock';
 
 const messages = defineMessages({
   releasedate: 'Release Date',
@@ -512,6 +513,14 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
               </div>
             )}
           </div>
+          <div className="mt-4">
+            <ExternalLinkBlock
+              mediaType="movie"
+              tmdbId={data.id}
+              imdbId={data.externalIds.imdbId}
+              rtUrl={ratingData?.url}
+            />
+          </div>
         </div>
       </div>
       <div className="md:flex md:items-center md:justify-between mb-4 mt-6">

src/assets/services/tmdb.svg

@@ -29,6 +29,7 @@ import type { RTRating } from '../../../server/api/rottentomatoes';
 import Head from 'next/head';
 import globalMessages from '../../i18n/globalMessages';
 import { ANIME_KEYWORD_ID } from '../../../server/api/themoviedb';
+import ExternalLinkBlock from '../ExternalLinkBlock';
 
 const messages = defineMessages({
   userrating: 'User Rating',
@@ -482,6 +483,14 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
               </div>
             )}
           </div>
+          <div className="mt-4">
+            <ExternalLinkBlock
+              mediaType="tv"
+              tmdbId={data.id}
+              imdbId={data.externalIds.imdbId}
+              rtUrl={ratingData?.url}
+            />
+          </div>
         </div>
       </div>
       <div className="md:flex md:items-center md:justify-between mb-4 mt-6">

src/components/ExternalLinkBlock/index.tsx

@@ -15,7 +15,7 @@ module.exports = {
     borderWidth: ['first', 'last'],
     margin: ['first', 'last', 'responsive'],
     boxShadow: ['group-focus'],
-    opacity: ['disabled'],
+    opacity: ['disabled', 'hover'],
   },
   plugins: [
     require('@tailwindcss/forms'),