From 27dd8e8cd5af6c13800d5e9c6acb43298df1ca2f Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Thu, 12 Dec 2024 21:59:19 +0200
Subject: [PATCH] New: Tooltip with extra genres on movie details page

---
 frontend/src/Movie/Details/MovieDetails.js |  5 ++-
 frontend/src/Movie/Details/MovieGenres.tsx | 39 ++++++++++++++++++++++
 2 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/Movie/Details/MovieGenres.tsx

diff --git a/frontend/src/Movie/Details/MovieDetails.js b/frontend/src/Movie/Details/MovieDetails.js
index 8aadf60fd..ecae574dd 100644
--- a/frontend/src/Movie/Details/MovieDetails.js
+++ b/frontend/src/Movie/Details/MovieDetails.js
@@ -42,6 +42,7 @@ import translate from 'Utilities/String/translate';
 import MovieCastPosters from './Credits/Cast/MovieCastPosters';
 import MovieCrewPosters from './Credits/Crew/MovieCrewPosters';
 import MovieDetailsLinks from './MovieDetailsLinks';
+import MovieGenres from './MovieGenres';
 import MovieReleaseDates from './MovieReleaseDates';
 import MovieStatusLabel from './MovieStatusLabel';
 import MovieTagsConnector from './MovieTagsConnector';
@@ -651,9 +652,7 @@ class MovieDetails extends Component {
                         name={translate('Genres')}
                         size={sizes.LARGE}
                       >
-                        <span className={styles.genres}>
-                          {genres.join(', ')}
-                        </span>
+                        <MovieGenres className={styles.genres} genres={genres} />
                       </InfoLabel> :
                       null
                   }
diff --git a/frontend/src/Movie/Details/MovieGenres.tsx b/frontend/src/Movie/Details/MovieGenres.tsx
new file mode 100644
index 000000000..77dc0c3cf
--- /dev/null
+++ b/frontend/src/Movie/Details/MovieGenres.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import Label from 'Components/Label';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { kinds, sizes, tooltipPositions } from 'Helpers/Props';
+
+interface MovieGenresProps {
+  className?: string;
+  genres: string[];
+}
+
+function MovieGenres({ className, genres }: MovieGenresProps) {
+  const firstGenres = genres.slice(0, 3);
+  const otherGenres = genres.slice(3);
+
+  if (otherGenres.length) {
+    return (
+      <Tooltip
+        anchor={<span className={className}>{firstGenres.join(', ')}</span>}
+        tooltip={
+          <div>
+            {otherGenres.map((tag) => {
+              return (
+                <Label key={tag} kind={kinds.INFO} size={sizes.LARGE}>
+                  {tag}
+                </Label>
+              );
+            })}
+          </div>
+        }
+        kind={kinds.INVERSE}
+        position={tooltipPositions.TOP}
+      />
+    );
+  }
+
+  return <span className={className}>{firstGenres.join(', ')}</span>;
+}
+
+export default MovieGenres;