refactor: make components more modular

would help in implementing name route also did some stylistic changes
2023-04-15 20:56:15 +05:30
parent 8ce02d0236
commit 18ca98fd4a
43 changed files with 757 additions and 796 deletions
--- a/src/components/card/Card.tsx
+++ b/src/components/card/Card.tsx
@ -0,0 +1,29 @@
+import type { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react';
+import styles from 'src/styles/modules/components/card/card.module.scss';
+
+// ensuring that other attributes to <Card/> are correct based on the value of 'as' prop.
+// a cheap implementation of as prop found in libraries like CharkaUI or MaterialUI.
+type Props<T extends ElementType> = {
+  children: ReactNode;
+  as?: T | 'section';
+  hoverable?: true;
+} & ComponentPropsWithoutRef<T>;
+
+const Card = <T extends ElementType = 'li'>({
+  children,
+  as,
+  hoverable,
+  className,
+  ...rest
+}: Props<T>) => {
+  const Component = as ?? 'li';
+  const classNames = `${hoverable ? styles.hoverable : ''} ${styles.card} ${className}`;
+
+  return (
+    <Component className={classNames} {...rest}>
+      {children}
+    </Component>
+  );
+};
+
+export default Card;
--- a/src/components/card/CardBasic.tsx
+++ b/src/components/card/CardBasic.tsx
@ -0,0 +1,45 @@
+import { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react';
+import Image from 'next/future/image';
+import Card from './Card';
+import { getProxiedIMDbImgUrl, modifyIMDbImg } from 'src/utils/helpers';
+import styles from 'src/styles/modules/components/card/card-basic.module.scss';
+
+type Props = {
+  children: ReactNode;
+  className?: string;
+  image?: string;
+  title: string;
+} & ComponentPropsWithoutRef<'section'>;
+
+const CardBasic = ({ image, children, className, title, ...rest }: Props) => {
+  const style: CSSProperties = {
+    backgroundImage: image && `url(${getProxiedIMDbImgUrl(modifyIMDbImg(image, 300))})`,
+  };
+
+  return (
+    <Card as='section' className={`${styles.container} ${className}`} {...rest}>
+      <div className={styles.imageContainer} style={style}>
+        {image ? (
+          <Image
+            className={styles.image}
+            src={modifyIMDbImg(image)}
+            alt=''
+            priority
+            fill
+            sizes='300px'
+          />
+        ) : (
+          <svg className={styles.imageNA}>
+            <use href='/svg/sprite.svg#icon-image-slash' />
+          </svg>
+        )}
+      </div>
+      <div className={styles.info}>
+        <h1 className={`${styles.title} heading heading__primary`}>{title}</h1>
+        {children}
+      </div>
+    </Card>
+  );
+};
+
+export default CardBasic;
--- a/src/components/card/CardCast.tsx
+++ b/src/components/card/CardCast.tsx
@ -0,0 +1,51 @@
+import Card from './Card';
+import styles from 'src/styles/modules/components/card/card-cast.module.scss';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import Link from 'next/link';
+import Image from 'next/future/image';
+import { modifyIMDbImg } from 'src/utils/helpers';
+
+type Props = {
+  link: string;
+  name: string;
+  characters: string[] | null;
+  attributes: string[] | null;
+  image?: string | null;
+  children?: ReactNode;
+} & ComponentPropsWithoutRef<'li'>;
+
+const CardCast = ({ link, name, image, children, characters, attributes, ...rest }: Props) => {
+  return (
+    <Card hoverable {...rest}>
+      <Link href={link}>
+        <a className={styles.item}>
+          <div className={styles.imgContainer}>
+            {image ? (
+              <Image
+                src={modifyIMDbImg(image, 400)}
+                alt=''
+                fill
+                className={styles.img}
+                sizes='200px'
+              />
+            ) : (
+              <svg className={styles.imgNA}>
+                <use href='/svg/sprite.svg#icon-image-slash' />
+              </svg>
+            )}
+          </div>
+          <div className={styles.textContainer}>
+            <p className={`heading ${styles.name}`}>{name}</p>
+            <p className={styles.role}>
+              {characters?.join(', ')}
+              {attributes && <span> ({attributes.join(', ')})</span>}
+            </p>
+            {children}
+          </div>
+        </a>
+      </Link>
+    </Card>
+  );
+};
+
+export default CardCast;
--- a/src/components/card/CardResult.tsx
+++ b/src/components/card/CardResult.tsx
@ -0,0 +1,42 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import Link from 'next/link';
+import Image from 'next/future/image';
+import Card from './Card';
+import { modifyIMDbImg } from 'src/utils/helpers';
+import styles from 'src/styles/modules/components/card/card-result.module.scss';
+
+type Props = {
+  link: string;
+  name: string;
+  image?: string;
+  showImage?: true;
+  children?: ReactNode;
+} & ComponentPropsWithoutRef<'li'>;
+
+const CardResult = ({ link, name, image, showImage, children, ...rest }: Props) => {
+  let ImageComponent = null;
+  if (showImage)
+    ImageComponent = image ? (
+      <Image src={modifyIMDbImg(image, 400)} alt='' fill className={styles.img} sizes='200px' />
+    ) : (
+      <svg className={styles.imgNA}>
+        <use href='/svg/sprite.svg#icon-image-slash' />
+      </svg>
+    );
+
+  return (
+    <Card hoverable {...rest}>
+      <Link href={link}>
+        <a className={`${styles.item} ${!showImage && styles.sansImage}`}>
+          <div className={styles.imgContainer}>{ImageComponent}</div>
+          <div className={styles.info}>
+            <p className={`heading ${styles.heading}`}>{name}</p>
+            {children}
+          </div>
+        </a>
+      </Link>
+    </Card>
+  );
+};
+
+export default CardResult;
--- a/src/components/card/CardTitle.tsx
+++ b/src/components/card/CardTitle.tsx
@ -0,0 +1,63 @@
+import Card from './Card';
+import styles from 'src/styles/modules/components/card/card-title.module.scss';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import Link from 'next/link';
+import Image from 'next/future/image';
+import { formatNumber, modifyIMDbImg } from 'src/utils/helpers';
+
+type Props = {
+  link: string;
+  name: string;
+  titleType: string;
+  year?: { start: number; end: number | null };
+  ratings?: { avg: number | null; numVotes: number };
+  image?: string;
+  children?: ReactNode;
+} & ComponentPropsWithoutRef<'li'>;
+
+const CardTitle = ({ link, name, year, image, ratings, titleType, children, ...rest }: Props) => {
+  const years = year?.end ? `${year.start}-${year.end}` : year?.start;
+
+  return (
+    <Card hoverable {...rest}>
+      <Link href={link}>
+        <a className={styles.item}>
+          <div className={styles.imgContainer}>
+            {image ? (
+              <Image
+                src={modifyIMDbImg(image, 400)}
+                alt=''
+                fill
+                className={styles.img}
+                sizes='200px'
+              />
+            ) : (
+              <svg className={styles.imgNA}>
+                <use href='/svg/sprite.svg#icon-image-slash' />
+              </svg>
+            )}
+          </div>
+          <div className={styles.textContainer}>
+            <p className={`heading ${styles.name}`}>{name}</p>
+            <p>
+              <span>{titleType}</span>
+              <span>{years && ` (${years})`}</span>
+            </p>
+            {ratings?.avg && (
+              <p className={styles.rating}>
+                <span className={styles.ratingNum}>{ratings.avg}</span>
+                <svg className={styles.ratingIcon}>
+                  <use href='/svg/sprite.svg#icon-rating'></use>
+                </svg>
+                <span> ({formatNumber(ratings.numVotes)} votes)</span>
+              </p>
+            )}
+            {children}
+          </div>
+        </a>
+      </Link>
+    </Card>
+  );
+};
+
+export default CardTitle;
--- a/src/components/card/index.tsx
+++ b/src/components/card/index.tsx
@ -0,0 +1,5 @@
+export { default as Card } from './Card';
+export { default as CardTitle } from './CardTitle';
+export { default as CardBasic } from './CardBasic';
+export { default as CardCast } from './CardCast';
+export { default as CardResult } from './CardResult';
--- a/src/components/error/ErrorInfo.tsx
+++ b/src/components/error/ErrorInfo.tsx
@ -33,15 +33,12 @@ const ErrorInfo = ({ message, statusCode, misc }: Props) => {
        >
          <title id='gnu-title'>GNU and Tux</title>
          <desc id='gnu-desc'>
-            A pencil drawing of a big gnu and a small penguin, both very sad.
-            GNU is despondently sitting on a bench, and Tux stands beside him,
-            looking down and patting him on the back.
+            A pencil drawing of a big gnu and a small penguin, both very sad. GNU is despondently
+            sitting on a bench, and Tux stands beside him, looking down and patting him on the back.
          </desc>
          <use href='/svg/sadgnu.svg#sad-gnu'></use>
        </svg>
-        <h1 className={`heading heading__primary ${styles.heading}`}>
-          {title}
-        </h1>
+        <h1 className={`heading heading__primary ${styles.heading}`}>{title}</h1>
        {misc ? (
          <>
            <p>{misc.subtext}</p>
@ -52,7 +49,7 @@ const ErrorInfo = ({ message, statusCode, misc }: Props) => {
        ) : (
          <p>
            Go back to{' '}
-            <Link href='/about'>
+            <Link href='/'>
              <a className='link'>the homepage</a>
            </Link>
            .
--- a/src/components/find/Company.tsx
+++ b/src/components/find/Company.tsx
@ -1,22 +1,13 @@
+import { CardResult } from 'src/components/card';
 import { Companies } from 'src/interfaces/shared/search';
-import Link from 'next/link';

-import styles from 'src/styles/modules/components/find/company.module.scss';
+type Props = { company: Companies[number] };

-type Props = {
-  company: Companies[0];
-};
-
-const Company = ({ company }: Props) => {
-  return (
-    <li className={styles.company}>
-      <Link href={`name/${company.id}`}>
-        <a className={`heading ${styles.heading}`}>{company.name}</a>
-      </Link>
-      {company.country && <p>{company.country}</p>}
-      {!!company.type && <p>{company.type}</p>}
-    </li>
-  );
-};
+const Company = ({ company }: Props) => (
+  <CardResult name={company.name} link={`/search/title?companies=${company.id}`}>
+    {company.country && <p>{company.country}</p>}
+    {!!company.type && <p>{company.type}</p>}
+  </CardResult>
+);

 export default Company;
--- a/src/components/find/Keyword.tsx
+++ b/src/components/find/Keyword.tsx
@ -1,20 +1,12 @@
-import Link from 'next/link';
+import { CardResult } from 'src/components/card';
 import { Keywords } from 'src/interfaces/shared/search';
-import styles from 'src/styles/modules/components/find/keyword.module.scss';

-type Props = {
-  keyword: Keywords[0];
-};
+type Props = { keyword: Keywords[number] };

-const Keyword = ({ keyword }: Props) => {
-  return (
-    <li className={styles.keyword}>
-      <Link href={`name/${keyword.id}`}>
-        <a className={`heading ${styles.heading}`}>{keyword.text}</a>
-      </Link>
-      {keyword.numTitles && <p>{keyword.numTitles} titles</p>}
-    </li>
-  );
-};
+const Keyword = ({ keyword }: Props) => (
+  <CardResult link={`/search/keyword?keywords=${keyword.text}`} name={keyword.text}>
+    {keyword.numTitles && <p>{keyword.numTitles} titles</p>}
+  </CardResult>
+);

 export default Keyword;
--- a/src/components/find/Person.tsx
+++ b/src/components/find/Person.tsx
@ -1,44 +1,19 @@
-import Image from 'next/future/image';
-import Link from 'next/link';
+import { CardResult } from 'src/components/card';
 import { People } from 'src/interfaces/shared/search';
-import { modifyIMDbImg } from 'src/utils/helpers';
 import styles from 'src/styles/modules/components/find/person.module.scss';

-type Props = {
-  person: People[0];
-};
+type Props = { person: People[number] };

 const Person = ({ person }: Props) => {
  return (
-    <li className={styles.person}>
-      <div className={styles.imgContainer} style={{ position: 'relative' }}>
-        {person.image ? (
-          <Image
-            src={modifyIMDbImg(person.image.url, 400)}
-            alt={person.image.caption}
-            fill
-            className={styles.img}
-          />
-        ) : (
-          <svg className={styles.imgNA}>
-            <use href='/svg/sprite.svg#icon-image-slash' />
-          </svg>
-        )}
-      </div>
-      <div className={styles.info}>
-        <Link href={`name/${person.id}`}>
-          <a className={`heading ${styles.heading}`}>{person.name}</a>
-        </Link>
-        {person.aka && <p>{person.aka}</p>}
-        {person.jobCateogry && <p>{person.jobCateogry}</p>}
-        {(person.knownForTitle || person.knownInYear) && (
-          <ul className={styles.basicInfo} aria-label='quick facts'>
-            {person.knownForTitle && <li>{person.knownForTitle}</li>}
-            {person.knownInYear && <li>{person.knownInYear}</li>}
-          </ul>
-        )}
-      </div>
-    </li>
+    <CardResult showImage name={person.name} link={`/name/${person.id}`} image={person.image?.url}>
+      <p>{person.aka}</p>
+      <p>{person.jobCateogry}</p>
+      <ul className={styles.basicInfo} aria-label='quick facts'>
+        {person.knownForTitle && <li>{person.knownForTitle}</li>}
+        {person.knownInYear && <li>{person.knownInYear}</li>}
+      </ul>
+    </CardResult>
  );
 };

--- a/src/components/find/Title.tsx
+++ b/src/components/find/Title.tsx
@ -1,58 +1,36 @@
-import Image from 'next/future/image';
 import Link from 'next/link';
+import { CardResult } from 'src/components/card';
 import { Titles } from 'src/interfaces/shared/search';
-import { modifyIMDbImg } from 'src/utils/helpers';
 import styles from 'src/styles/modules/components/find/title.module.scss';

-type Props = {
-  title: Titles[0];
-};
+type Props = { title: Titles[number] };

 const Title = ({ title }: Props) => {
  return (
-    <li className={styles.title}>
-      <div className={styles.imgContainer}>
-        {title.image ? (
-          <Image
-            src={modifyIMDbImg(title.image.url, 400)}
-            alt={title.image.caption}
-            fill
-            className={styles.img}
-          />
-        ) : (
-          <svg className={styles.imgNA}>
-            <use href='/svg/sprite.svg#icon-image-slash' />
-          </svg>
-        )}
-      </div>
-      <div className={styles.info}>
-        <Link href={`/title/${title.id}`}>
-          <a className={`heading ${styles.heading}`}>{title.name}</a>
-        </Link>
-        <ul aria-label='quick facts' className={styles.basicInfo}>
-          {title.type && <li>{title.type}</li>}
-          {title.sAndE && <li>{title.sAndE}</li>}
-          {title.releaseYear && <li>{title.releaseYear}</li>}
+    <CardResult showImage name={title.name} link={`/title/${title.id}`} image={title.image?.url}>
+      <ul aria-label='quick facts' className={styles.basicInfo}>
+        <li>{title.type}</li>
+        <li>{title.sAndE}</li>
+        <li>{title.releaseYear}</li>
+      </ul>
+      {!!title.credits.length && (
+        <p className={styles.stars}>
+          <span>Stars: </span>
+          {title.credits.join(', ')}
+        </p>
+      )}
+      {title.seriesId && (
+        <ul aria-label='quick series facts' className={styles.seriesInfo}>
+          {title.seriesType && <li>{title.seriesType}</li>}
+          <li>
+            <Link href={`/title/${title.seriesId}`}>
+              <a className='link'>{title.seriesName}</a>
+            </Link>
+          </li>
+          {title.seriesReleaseYear && <li>{title.seriesReleaseYear}</li>}
        </ul>
-        {!!title.credits.length && (
-          <p className={styles.stars}>
-            <span>Stars: </span>
-            {title.credits.join(', ')}
-          </p>
-        )}
-        {title.seriesId && (
-          <ul aria-label='quick series facts' className={styles.seriesInfo}>
-            {title.seriesType && <li>{title.seriesType}</li>}
-            <li>
-              <Link href={`/title/${title.seriesId}`}>
-                <a className='link'>{title.seriesName}</a>
-              </Link>
-            </li>
-            {title.seriesReleaseYear && <li>{title.seriesReleaseYear}</li>}
-          </ul>
-        )}
-      </div>
-    </li>
+      )}
+    </CardResult>
  );
 };

--- a/src/components/find/index.tsx
+++ b/src/components/find/index.tsx
@ -12,18 +12,16 @@ type Props = {
  title: string;
 };

-const resultsExist = (results: Props['results']) => {
-  if (
-    !results ||
-    (!results.people.length &&
-      !results.keywords.length &&
-      !results.companies.length &&
-      !results.titles.length)
-  )
-    return false;
-
-  return true;
-};
+const resultsExist = (
+  results: Props['results']
+): results is NonNullable<Props['results']> =>
+  Boolean(
+    results &&
+      (results.people.length ||
+        results.keywords.length ||
+        results.companies.length ||
+        results.titles.length)
+  );

 // MAIN COMPONENT
 const Results = ({ results, className, title }: Props) => {
@ -34,7 +32,7 @@ const Results = ({ results, className, title }: Props) => {
      </h1>
    );

-  const { titles, people, keywords, companies, meta } = results!;
+  const { titles, people, keywords, companies, meta } = results;
  const titlesSectionHeading = getResTitleTypeHeading(
    meta.type,
    meta.titleType
--- a/src/components/media/Media.tsx
+++ b/src/components/media/Media.tsx
@ -1,14 +1,16 @@
 import Image from 'next/future/image';
 import Link from 'next/link';
-import { Media } from 'src/interfaces/shared/title';
+import { Media } from 'src/interfaces/shared';
 import { getProxiedIMDbImgUrl, modifyIMDbImg } from 'src/utils/helpers';
-import styles from 'src/styles/modules/components/title/media.module.scss';
+import styles from 'src/styles/modules/components/media/media.module.scss';

 type Props = {
  className: string;
  media: Media;
 };

+// TODO: refactor this component.
+
 const Media = ({ className, media }: Props) => {
  return (
    <div className={`${className} ${styles.media}`}>
@ -21,13 +23,9 @@ const Media = ({ className, media }: Props) => {
              <div className={styles.trailer}>
                <video
                  aria-label='trailer video'
-                  // it's a relatively new tag. hence jsx-all1 complains
-                  aria-description={media.trailer.caption}
                  controls
                  playsInline
-                  poster={getProxiedIMDbImgUrl(
-                    modifyIMDbImg(media.trailer.thumbnail)
-                  )}
+                  poster={getProxiedIMDbImgUrl(modifyIMDbImg(media.trailer.thumbnail))}
                  className={styles.trailer__video}
                  preload='none'
                >
@ -76,9 +74,7 @@ const Media = ({ className, media }: Props) => {
                  fill
                  sizes='400px'
                />
-                <figcaption className={styles.image__caption}>
-                  {image.caption.plainText}
-                </figcaption>
+                <figcaption className={styles.image__caption}>{image.caption.plainText}</figcaption>
              </figure>
            ))}
          </div>
--- a/src/components/meta/Meta.tsx
+++ b/src/components/meta/Meta.tsx
@ -1,4 +1,5 @@
 import Head from 'next/head';
+import { ReactNode } from 'react';

 type Props = {
  title: string;
@ -6,11 +7,15 @@ type Props = {
  imgUrl?: string;
 };

+const BASE_URL = process.env.NEXT_PUBLIC_URL ?? 'https://iket.me';
+
 const Meta = ({
  title,
  description = 'libremdb, a free & open source IMDb front-end.',
  imgUrl = 'icon.svg',
 }: Props) => {
+  const url = new URL(imgUrl, BASE_URL);
+
  return (
    <Head>
      <meta charSet='UTF-8' />
@ -30,10 +35,7 @@ const Meta = ({
      <meta property='og:site_name' content='libremdb' />
      <meta property='og:locale' content='en_US' />
      <meta property='og:type' content='video.movie' />
-      <meta
-        property='og:image'
-        content={`${process.env.NEXT_PUBLIC_URL}/${imgUrl}`}
-      />
+      <meta property='og:image' content={url.toString()} />
    </Head>
  );
 };
--- a/src/components/title/Basic.tsx
+++ b/src/components/title/Basic.tsx
@ -1,13 +1,8 @@
 import { Fragment } from 'react';
-import Image from 'next/future/image';
 import Link from 'next/link';
+import { CardBasic } from 'src/components/card';
 import { Basic } from 'src/interfaces/shared/title';
-import {
-  formatNumber,
-  formatTime,
-  getProxiedIMDbImgUrl,
-  modifyIMDbImg,
-} from 'src/utils/helpers';
+import { formatNumber, formatTime } from 'src/utils/helpers';
 import styles from 'src/styles/modules/components/title/basic.module.scss';

 type Props = {
@ -23,135 +18,92 @@ const Basic = ({ data, className }: Props) => {
      : data.releaseYear?.start;

  return (
-    <section
-      // role is valid but not known to jsx-a11y
-      // aria-description={`basic info for '${data.title}'`}
-      // style={{ backgroundImage: data.poster && `url(${data.poster?.url})` }}
+    <CardBasic
      className={`${styles.container} ${className}`}
+      image={data.poster?.url}
+      title={data.title}
    >
-      <div
-        className={styles.imageContainer}
-        style={{
-          backgroundImage:
-            data.poster &&
-            `url(${getProxiedIMDbImgUrl(modifyIMDbImg(data.poster.url, 300))})`,
-        }}
-      >
-        {data.poster ? (
-          <Image
-            className={styles.image}
-            src={modifyIMDbImg(data.poster.url)}
-            alt={data.poster.caption}
-            priority
-            fill
-            sizes='300px'
-          />
-        ) : (
-          <svg className={styles.image__NA}>
-            <use href='/svg/sprite.svg#icon-image-slash' />
-          </svg>
+      <ul className={styles.meta} aria-label='quick facts'>
+        {data.status && data.status.id !== 'released' && (
+          <li className={styles.meta__text}>{data.status.text}</li>
        )}
-      </div>
-      <div className={styles.info}>
-        <h1 className={`${styles.title} heading heading__primary`}>
-          {data.title}
-        </h1>
-        <ul className={styles.meta} aria-label='quick facts'>
-          {data.status && data.status.id !== 'released' && (
-            <li className={styles.meta__text}>{data.status.text}</li>
-          )}
-          <li className={styles.meta__text}>{data.type.name}</li>
-          {data.releaseYear && (
-            <li className={styles.meta__text}>{releaseTime}</li>
-          )}
-          {data.ceritficate && (
-            <li className={styles.meta__text}>{data.ceritficate}</li>
-          )}
-          {data.runtime && (
-            <li className={styles.meta__text}>{formatTime(data.runtime)}</li>
-          )}
-        </ul>
-        <div className={styles.ratings}>
-          {data.ratings.avg && (
-            <>
-              <p className={styles.rating}>
-                <span className={styles.rating__num}>{data.ratings.avg}</span>
-                <svg className={styles.rating__icon}>
-                  <use href='/svg/sprite.svg#icon-rating'></use>
-                </svg>
-                <span className={styles.rating__text}> Avg. rating</span>
-              </p>
-              <p className={styles.rating}>
-                <span className={styles.rating__num}>
-                  {formatNumber(data.ratings.numVotes)}
-                </span>
-                <svg className={styles.rating__icon}>
-                  <use href='/svg/sprite.svg#icon-like-dislike'></use>
-                </svg>
-                <span className={styles.rating__text}> No. of votes</span>
-              </p>
-            </>
-          )}
-          {data.ranking && (
+        <li className={styles.meta__text}>{data.type.name}</li>
+        {data.releaseYear && <li className={styles.meta__text}>{releaseTime}</li>}
+        {data.ceritficate && <li className={styles.meta__text}>{data.ceritficate}</li>}
+        {data.runtime && <li className={styles.meta__text}>{formatTime(data.runtime)}</li>}
+      </ul>
+      <div className={styles.ratings}>
+        {data.ratings.avg && (
+          <>
            <p className={styles.rating}>
-              <span className={styles.rating__num}>
-                {formatNumber(data.ranking.position)}
-              </span>
+              <span className={styles.rating__num}>{data.ratings.avg}</span>
              <svg className={styles.rating__icon}>
-                <use href='/svg/sprite.svg#icon-graph-rising'></use>
+                <use href='/svg/sprite.svg#icon-rating'></use>
              </svg>
-              <span className={styles.rating__text}>
-                {' '}
-                Popularity (
-                <span className={styles.rating__sub}>
-                  {data.ranking.direction === 'UP'
-                    ? `\u2191${formatNumber(data.ranking.change)}`
-                    : data.ranking.direction === 'DOWN'
-                    ? `\u2193${formatNumber(data.ranking.change)}`
-                    : ''}
-                </span>
-                )
-              </span>
+              <span className={styles.rating__text}> Avg. rating</span>
            </p>
-          )}
-        </div>
-
-        {!!data.genres.length && (
-          <p className={styles.genres}>
-            <span className={styles.genres__heading}>Genres: </span>
-            {data.genres.map((genre, i) => (
-              <Fragment key={genre.id}>
-                {i > 0 && ', '}
-                <Link href={`/search/title?genres=${genre.id}`}>
-                  <a className={styles.link}>{genre.text}</a>
-                </Link>
-              </Fragment>
-            ))}
+            <p className={styles.rating}>
+              <span className={styles.rating__num}>{formatNumber(data.ratings.numVotes)}</span>
+              <svg className={styles.rating__icon}>
+                <use href='/svg/sprite.svg#icon-like-dislike'></use>
+              </svg>
+              <span className={styles.rating__text}> No. of votes</span>
+            </p>
+          </>
+        )}
+        {data.ranking && (
+          <p className={styles.rating}>
+            <span className={styles.rating__num}>{formatNumber(data.ranking.position)}</span>
+            <svg className={styles.rating__icon}>
+              <use href='/svg/sprite.svg#icon-graph-rising'></use>
+            </svg>
+            <span className={styles.rating__text}>
+              {' '}
+              Popularity (
+              <span className={styles.rating__sub}>
+                {data.ranking.direction === 'UP'
+                  ? `\u2191${formatNumber(data.ranking.change)}`
+                  : data.ranking.direction === 'DOWN'
+                  ? `\u2193${formatNumber(data.ranking.change)}`
+                  : ''}
+              </span>
+              )
+            </span>
          </p>
        )}
-        {
-          <p className={styles.overview}>
-            <span className={styles.overview__heading}>Plot: </span>
-            <span className={styles.overview__text}>{data.plot || '-'}</span>
-          </p>
-        }
-        {data.primaryCrew.map(crewType => (
-          <p className={styles.crewType} key={crewType.type.id}>
-            <span className={styles.crewType__heading}>
-              {`${crewType.type.category}: `}
-            </span>
-            {crewType.crew.map((crew, i) => (
-              <Fragment key={crew.id}>
-                {i > 0 && ', '}
-                <Link href={`/name/${crew.id}`}>
-                  <a className={styles.link}>{crew.name}</a>
-                </Link>
-              </Fragment>
-            ))}
-          </p>
-        ))}
      </div>
-    </section>
+
+      {!!data.genres.length && (
+        <p className={styles.genres}>
+          <span className={styles.genres__heading}>Genres: </span>
+          {data.genres.map((genre, i) => (
+            <Fragment key={genre.id}>
+              {i > 0 && ', '}
+              <Link href={`/search/title?genres=${genre.id}`}>
+                <a className={styles.link}>{genre.text}</a>
+              </Link>
+            </Fragment>
+          ))}
+        </p>
+      )}
+      <p className={styles.overview}>
+        <span className={styles.overview__heading}>Plot: </span>
+        <span className={styles.overview__text}>{data.plot || '-'}</span>
+      </p>
+      {data.primaryCrew.map(crewType => (
+        <p className={styles.crewType} key={crewType.type.id}>
+          <span className={styles.crewType__heading}>{`${crewType.type.category}: `}</span>
+          {crewType.crew.map((crew, i) => (
+            <Fragment key={crew.id}>
+              {i > 0 && ', '}
+              <Link href={`/name/${crew.id}`}>
+                <a className={styles.link}>{crew.name}</a>
+              </Link>
+            </Fragment>
+          ))}
+        </p>
+      ))}
+    </CardBasic>
  );
 };

--- a/src/components/title/Cast.tsx
+++ b/src/components/title/Cast.tsx
@ -1,7 +1,5 @@
-import Image from 'next/future/image';
-import Link from 'next/link';
+import { CardCast } from 'src/components/card';
 import { Cast } from 'src/interfaces/shared/title';
-import { modifyIMDbImg } from 'src/utils/helpers';
 import styles from 'src/styles/modules/components/title/cast.module.scss';

 type Props = {
@ -10,46 +8,25 @@ type Props = {
 };

 const Cast = ({ className, cast }: Props) => {
-  if (!cast.length) return <></>;
+  if (!cast.length) return null;

  return (
    <section className={`${className} ${styles.container}`}>
      <h2 className='heading heading__secondary'>Cast</h2>
      <ul className={styles.cast}>
        {cast.map(member => (
-          <li key={member.id} className={styles.member}>
-            <div className={styles.member__imgContainer}>
-              {member.image ? (
-                <Image
-                  src={modifyIMDbImg(member.image, 400)}
-                  alt=''
-                  fill
-                  className={styles.member__img}
-                  sizes='200px'
-                />
-              ) : (
-                <svg className={styles.member__imgNA}>
-                  <use href='/svg/sprite.svg#icon-image-slash' />
-                </svg>
-              )}
-            </div>
-            <div className={styles.member__textContainer}>
-              <p>
-                <Link href={`/name/${member.id}`}>
-                  <a className={styles.member__name}>{member.name}</a>
-                </Link>
-              </p>
-              <p className={styles.member__role}>
-                {member.characters?.join(', ')}
-                {member.attributes && (
-                  <span> ({member.attributes.join(', ')})</span>
-                )}
-              </p>
-            </div>
-          </li>
+          <CardCast
+            key={member.id}
+            link={`/name/${member.id}`}
+            name={member.name}
+            image={member.image}
+            characters={member.characters}
+            attributes={member.attributes}
+          />
        ))}
      </ul>
    </section>
  );
 };
+
 export default Cast;
--- a/src/components/title/MoreLikeThis.tsx
+++ b/src/components/title/MoreLikeThis.tsx
@ -1,7 +1,5 @@
-import Image from 'next/future/image';
-import Link from 'next/link';
+import { CardTitle } from 'src/components/card';
 import { MoreLikeThis } from 'src/interfaces/shared/title';
-import { formatNumber, modifyIMDbImg } from 'src/utils/helpers';
 import styles from 'src/styles/modules/components/title/more-like-this.module.scss';

 type Props = {
@ -10,52 +8,22 @@ type Props = {
 };

 const MoreLikeThis = ({ className, data }: Props) => {
-  if (!data.length) return <></>;
+  if (!data.length) return null;

  return (
    <section className={`${className} ${styles.morelikethis}`}>
      <h2 className='heading heading__secondary'>More like this</h2>
      <ul className={styles.container}>
        {data.map(title => (
-          <li key={title.id}>
-            <Link href={`/title/${title.id}`}>
-              <a className={styles.item}>
-                <div className={styles.item__imgContainer}>
-                  {title.poster ? (
-                    <Image
-                      src={modifyIMDbImg(title.poster.url, 400)}
-                      alt=''
-                      fill
-                      className={styles.item__img}
-                      sizes='200px'
-                    />
-                  ) : (
-                    <svg className={styles.item__imgNA}>
-                      <use href='/svg/sprite.svg#icon-image-slash' />
-                    </svg>
-                  )}
-                </div>
-                <div className={styles.item__textContainer}>
-                  <h3 className={`heading ${styles.item__heading}`}>
-                    {title.title}
-                  </h3>
-                  {title.ratings.avg && (
-                    <p className={styles.item__rating}>
-                      <span className={styles.item__ratingNum}>
-                        {title.ratings.avg}
-                      </span>
-                      <svg className={styles.item__ratingIcon}>
-                        <use href='/svg/sprite.svg#icon-rating'></use>
-                      </svg>
-                      <span>
-                        ({formatNumber(title.ratings.numVotes)} votes)
-                      </span>
-                    </p>
-                  )}
-                </div>
-              </a>
-            </Link>
-          </li>
+          <CardTitle
+            key={title.id}
+            link={`/title/${title.id}`}
+            name={title.title}
+            titleType={title.type.text}
+            image={title.poster?.url}
+            year={title.releaseYear}
+            ratings={title.ratings}
+          />
        ))}
      </ul>
    </section>
--- a/src/components/title/index.tsx
+++ b/src/components/title/index.tsx
@ -1,9 +1,6 @@
-import Basic from './Basic';
-import Cast from './Cast';
-import DidYouKnow from './DidYouKnow';
-import Info from './Info';
-import Media from './Media';
-import MoreLikeThis from './MoreLikeThis';
-import Reviews from './Reviews';
-
-export { Basic, Cast, DidYouKnow, Info, Media, MoreLikeThis, Reviews };
+export { default as Basic } from './Basic';
+export { default as Cast } from './Cast';
+export { default as DidYouKnow } from './DidYouKnow';
+export { default as Info } from './Info';
+export { default as MoreLikeThis } from './MoreLikeThis';
+export { default as Reviews } from './Reviews';