feat(ui): add trakt external link (#2367)

* feat(ui): add trakt external link

* feat(ui): move trakt to end of list of external links

Co-authored-by: Ryan Cohen <ryan@sct.dev>

src/assets/services/trakt.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144.8 144.8" enable-background="new 0 0 144.8 144.8"><g><circle fill="#FFFFFF" cx="72.4" cy="72.4" r="72.4"/><path fill="#ED2224" d="M29.5,111.8c10.6,11.6,25.9,18.8,42.9,18.8c8.7,0,16.9-1.9,24.3-5.3L56.3,85L29.5,111.8z"/><path fill="#ED2224" d="M56.1,60.6L25.5,91.1L21.4,87l32.2-32.2h0l37.6-37.6c-5.9-2-12.2-3.1-18.8-3.1c-32.2,0-58.3,26.1-58.3,58.3 c0,13.1,4.3,25.2,11.7,35l30.5-30.5l2.1,2l43.7,43.7c0.9-0.5,1.7-1,2.5-1.6L56.3,72.7L27,102l-4.1-4.1l33.4-33.4l2.1,2l51,50.9 c0.8-0.6,1.5-1.3,2.2-1.9l-55-55L56.1,60.6z"/><path fill="#ED1C24" d="M115.7,111.4c9.3-10.3,15-24,15-39c0-23.4-13.8-43.5-33.6-52.8L60.4,56.2L115.7,111.4z M74.5,66.8l-4.1-4.1 l28.9-28.9l4.1,4.1L74.5,66.8z M101.9,27.1L68.6,60.4l-4.1-4.1L97.8,23L101.9,27.1z"/><g><g><path fill="#ED2224" d="M72.4,144.8C32.5,144.8,0,112.3,0,72.4C0,32.5,32.5,0,72.4,0s72.4,32.5,72.4,72.4 C144.8,112.3,112.3,144.8,72.4,144.8z M72.4,7.3C36.5,7.3,7.3,36.5,7.3,72.4s29.2,65.1,65.1,65.1s65.1-29.2,65.1-65.1 S108.3,7.3,72.4,7.3z"/></g></g></g></svg>

src/components/ExternalLinkBlock/index.tsx

@@ -4,6 +4,7 @@ import ImdbLogo from '../../assets/services/imdb.svg';
 import PlexLogo from '../../assets/services/plex.svg';
 import RTLogo from '../../assets/services/rt.svg';
 import TmdbLogo from '../../assets/services/tmdb.svg';
+import TraktLogo from '../../assets/services/trakt.svg';
 import TvdbLogo from '../../assets/services/tvdb.svg';
 import useLocale from '../../hooks/useLocale';
 
@@ -78,6 +79,18 @@ const ExternalLinkBlock: React.FC<ExternalLinkBlockProps> = ({
           <RTLogo />
         </a>
       )}
+      {tmdbId && (
+        <a
+          href={`https://trakt.tv/search/tmdb/${tmdbId}?id_type=${
+            mediaType === 'movie' ? 'movie' : 'show'
+          }`}
+          className="w-8 transition duration-300 opacity-50 hover:opacity-100"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <TraktLogo />
+        </a>
+      )}
     </div>
   );
 };