refactor: make components more modular

would help in implementing name route

also did some stylistic changes

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;

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;

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>
   );
 };
 

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>
   );
 };
 

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