feat: New PersonCard component

DesterLib · Jul 19, 2024 · cbeabed · cbeabed
1 parent 4fc80dd
commit cbeabed
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 12 deletions.
diff --git a/src/lib/components/Cards/PersonCard.tsx b/src/lib/components/Cards/PersonCard.tsx
@@ -4,14 +4,21 @@ interface PersonDetails {
   profile_path?: string;
   name: string;
   roles: { character: string }[];
+  character?: string;
   department?: string;
+  known_for_department?: string;
+  job?: string;
 }
 
 interface PersonCardProps {
   personDetails: PersonDetails;
+  type: "movie" | "tv";
 }
 
-const PersonCard: React.FC<PersonCardProps> = ({ personDetails }) => {
+const PersonCard: React.FC<PersonCardProps> = ({
+  personDetails,
+  type = "movie",
+}) => {
   return (
     <div className="p-2 w-fit bg-gradient-to-br from-white/20 to-transparent rounded-2xl flex space-x-2 shadow-[inset_0_1px_0_0_#ffffff1a] transition-all bg-size-200 bg-pos-100 hover:bg-pos-0">
       <div className="!w-[60px] rounded-lg overflow-hidden aspect-square flex items-center justify-center bg-zinc-600/80">
@@ -25,13 +32,21 @@ const PersonCard: React.FC<PersonCardProps> = ({ personDetails }) => {
           <div className="text-xs uppercase text-center">Image Not Found</div>
         )}
       </div>
-      <div className="px-2 flex-1 whitespace-nowrap">
+      <div className="flex-1 whitespace-nowrap min-w-[160px]">
         <div className="font-semibold">{personDetails.name}</div>
-        <div className="text-xs">
-          {personDetails.roles?.[0]?.character ||
-            personDetails.department ||
-            "N/A"}
-        </div>
+        {type === "movie" ? (
+          <div className="text-xs">
+            {personDetails.character || personDetails.job}
+            <br />
+            {personDetails.known_for_department}
+          </div>
+        ) : (
+          <div className="text-xs">
+            {personDetails.roles?.[0]?.character ||
+              personDetails.department ||
+              "N/A"}
+          </div>
+        )}
       </div>
     </div>
   );

diff --git a/src/lib/pages/MovieInfoPage.tsx b/src/lib/pages/MovieInfoPage.tsx
@@ -69,11 +69,21 @@ const MovieInfoPage = () => {
         </div>
       </div>
       <div className="px-[4.5rem] space-y-12">
-        <div className="text-2xl">Cast</div>
-        <div className="flex space-x-4 overflow-x-scroll">
-          {movie.credits.cast.map((cast: any, index: number) => (
-            <PersonCard key={index} personDetails={cast} />
-          ))}
+        <div className="space-y-4">
+          <div className="text-2xl">Cast</div>
+          <div className="flex space-x-4 overflow-x-scroll">
+            {movie.credits.cast.map((cast: any, index: number) => (
+              <PersonCard key={index} personDetails={cast} type="movie" />
+            ))}
+          </div>
+        </div>
+        <div className="space-y-4">
+          <div className="text-2xl">Crew</div>
+          <div className="flex space-x-4 overflow-x-scroll">
+            {movie.credits.crew.map((cast: any, index: number) => (
+              <PersonCard key={index} personDetails={cast} type="movie" />
+            ))}
+          </div>
         </div>
       </div>
     </motion.div>