feat(frontend/api): cast included with movie request and cast list on detail page

src/components/Common/ListView/index.tsx

@@ -6,6 +6,7 @@ import {
 } from '../../../../server/models/Search';
 import TitleCard from '../../TitleCard';
 import useVerticalScroll from '../../../hooks/useVerticalScroll';
+import PersonCard from '../../PersonCard';
 
 interface ListViewProps {
   items?: (TvResult | MovieResult | PersonResult)[];
@@ -64,7 +65,9 @@ const ListView: React.FC<ListViewProps> = ({
               );
               break;
             case 'person':
-              titleCard = <div>{title.name}</div>;
+              titleCard = (
+                <PersonCard name={title.name} profilePath={title.profilePath} />
+              );
               break;
           }
 

src/components/MovieDetails/index.tsx

@@ -11,6 +11,7 @@ import type { MovieResult } from '../../../server/models/Search';
 import Link from 'next/link';
 import Slider from '../Slider';
 import TitleCard from '../TitleCard';
+import PersonCard from '../PersonCard';
 
 interface MovieDetailsProps {
   movie?: MovieDetailsType;
@@ -280,6 +281,42 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
           </div>
         </div>
       </div>
+      <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
+        <div className="flex-1 min-w-0">
+          <Link href="/movie/[movieId]/cast" as={`/movie/${data.id}/cast`}>
+            <a className="inline-flex text-xl leading-7 text-cool-gray-300 hover:text-white sm:text-2xl sm:leading-9 sm:truncate items-center">
+              <span>Cast</span>
+              <svg
+                className="w-6 h-6 ml-2"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+            </a>
+          </Link>
+        </div>
+      </div>
+      <Slider
+        sliderKey="cast"
+        isLoading={!data && !error}
+        isEmpty={false}
+        items={data?.credits.cast.slice(0, 20).map((person) => (
+          <PersonCard
+            key={`cast-item-${person.id}`}
+            name={person.name}
+            subName={person.character}
+            profilePath={person.profilePath}
+          />
+        ))}
+      />
       <div className="md:flex md:items-center md:justify-between mb-4 mt-6">
         <div className="flex-1 min-w-0">
           <Link

src/components/PersonCard/index.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+interface PersonCardProps {
+  name: string;
+  subName?: string;
+  profilePath?: string;
+}
+
+const PersonCard: React.FC<PersonCardProps> = ({
+  name,
+  subName,
+  profilePath,
+}) => {
+  return (
+    <div className="relative w-36 sm:w-36 md:w-44 bg-cool-gray-600 rounded-lg text-white shadow-lg hover:bg-cool-gray-500 transition ease-in-out duration-150 cursor-pointer">
+      <div style={{ paddingBottom: '150%' }}>
+        <div className="absolute inset-0 flex flex-col items-center justify-center">
+          {profilePath && (
+            <div
+              style={{
+                backgroundImage: `url(https://image.tmdb.org/t/p/w600_and_h900_bestv2${profilePath})`,
+              }}
+              className="rounded-full w-28 h-28 md:w-32 md:h-32 bg-cover bg-center mb-6"
+            />
+          )}
+          {!profilePath && (
+            <svg
+              className="w-28 h-28 md:w-32 md:h-32 mb-6"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fillRule="evenodd"
+                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
+                clipRule="evenodd"
+              />
+            </svg>
+          )}
+          <div className="whitespace-normal text-center">{name}</div>
+          {subName && (
+            <div className="whitespace-normal text-center text-sm text-cool-gray-300">
+              {subName}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PersonCard;

src/components/TitleCard/index.tsx

@@ -99,7 +99,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
         onOk={() => cancelRequest()}
       />
       <div
-        className="titleCard outline-none"
+        className="titleCard outline-none cursor-default"
         style={{
           backgroundImage: `url(//image.tmdb.org/t/p/w600_and_h900_bestv2${image})`,
         }}
@@ -114,7 +114,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
         role="link"
         tabIndex={0}
       >
-        <div className="absolute top-0 h-full w-full bottom-0 left-0 right-0 overflow-hidden shadow-md">
+        <div className="absolute top-0 h-full w-full bottom-0 left-0 right-0 overflow-hidden shadow-xl">
           <div
             className={`absolute left-0 top-0 rounded-tl-md rounded-br-md z-50 ${
               mediaType === 'movie' ? 'bg-blue-500' : 'bg-purple-600'
@@ -204,7 +204,9 @@ const TitleCard: React.FC<TitleCardProps> = ({
                   </div>
                 </div>
                 <div className="flex justify-between left-0 bottom-0 right-0 top-0 px-2 py-2">
-                  <Link href={`/movie/${id}`}>
+                  <Link
+                    href={mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`}
+                  >
                     <a className="cursor-pointer flex w-full h-7 text-center text-white bg-indigo-500 rounded-sm mr-1 hover:bg-indigo-400 focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
                       <svg
                         className="w-4 mx-auto"