From fda85f0d8dfa3ef6aa02fc87d0e023bbe04d4036 Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Thu, 5 Jun 2025 12:50:36 -0600
Subject: [PATCH] make people clickable

---
 .../overlays/details/PeopleCarousel.tsx        | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/overlays/details/PeopleCarousel.tsx b/src/components/overlays/details/PeopleCarousel.tsx
index 6517348d..ca2c5a33 100644
--- a/src/components/overlays/details/PeopleCarousel.tsx
+++ b/src/components/overlays/details/PeopleCarousel.tsx
@@ -49,7 +49,12 @@ export function CastCarousel({ mediaId, mediaType }: CastCarouselProps) {
     <div className="space-y-4 pt-8">
       <div className="flex overflow-x-auto scrollbar-none pb-4 gap-4">
         {director && (
-          <div className="flex flex-col items-center space-y-2 flex-shrink-0">
+          <a
+            href={`https://www.themoviedb.org/person/${director.id}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex flex-col items-center space-y-2 flex-shrink-0 hover:opacity-80 transition-opacity"
+          >
             <div className="relative h-32 w-32 overflow-hidden rounded-full">
               <img
                 src={getPersonProfileImage(director.profile_path)}
@@ -61,12 +66,15 @@ export function CastCarousel({ mediaId, mediaType }: CastCarouselProps) {
               <span className="font-medium truncate">{director.name}</span>
               <span className="text-sm truncate">{t("Director")}</span>
             </div>
-          </div>
+          </a>
         )}
         {cast.map((member) => (
-          <div
+          <a
             key={member.id}
-            className="flex flex-col items-center space-y-2 flex-shrink-0"
+            href={`https://www.themoviedb.org/person/${member.id}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex flex-col items-center space-y-2 flex-shrink-0 hover:opacity-80 transition-opacity"
           >
             <div className="relative h-32 w-32 overflow-hidden rounded-full">
               <img
@@ -79,7 +87,7 @@ export function CastCarousel({ mediaId, mediaType }: CastCarouselProps) {
               <span className="font-medium truncate">{member.name}</span>
               <span className="text-sm truncate">{member.character}</span>
             </div>
-          </div>
+          </a>
         ))}
       </div>
     </div>