diff --git a/src/assets/services/imdb.svg b/src/assets/services/imdb.svg new file mode 100644 index 000000000..b99f43a1a --- /dev/null +++ b/src/assets/services/imdb.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/services/rt.svg b/src/assets/services/rt.svg new file mode 100644 index 000000000..6783b157b --- /dev/null +++ b/src/assets/services/rt.svg @@ -0,0 +1 @@ + diff --git a/src/assets/services/tmdb.svg b/src/assets/services/tmdb.svg new file mode 100644 index 000000000..62a660554 --- /dev/null +++ b/src/assets/services/tmdb.svg @@ -0,0 +1 @@ +Asset 4 \ No newline at end of file diff --git a/src/components/ExternalLinkBlock/index.tsx b/src/components/ExternalLinkBlock/index.tsx new file mode 100644 index 000000000..cc042fef9 --- /dev/null +++ b/src/components/ExternalLinkBlock/index.tsx @@ -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 = ({ + imdbId, + tmdbId, + rtUrl, + mediaType, +}) => { + return ( +
+ {tmdbId && ( + + + + )} + {imdbId && ( + + + + )} + {rtUrl && ( + + + + )} +
+ ); +}; + +export default ExternalLinkBlock; diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx index f11fb2b7a..9e2f967e8 100644 --- a/src/components/MovieDetails/index.tsx +++ b/src/components/MovieDetails/index.tsx @@ -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 = ({ movie }) => { )} +
+ +
diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx index d0f8d8844..c75029ce4 100644 --- a/src/components/TvDetails/index.tsx +++ b/src/components/TvDetails/index.tsx @@ -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 = ({ tv }) => {
)} +
+ +
diff --git a/tailwind.config.js b/tailwind.config.js index 0f721fc75..9793abc8d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -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'),