feat(route): add name route

adds much needed route

fix #39, #36,
https://codeberg.org/zyachel/libremdb/issues/11

README.md

@@ -107,7 +107,7 @@ Inspired by projects like [teddit](https://codeberg.org/teddit/teddit), [nitter]
 
   - [ ] lists
   - [ ] moviemeter
-  - [ ] person info(includes directors and actors)
+  - [x] person info(includes directors and actors)
   - [ ] company info
   - [ ] user info
 

src/components/name/Basic.tsx

@@ -0,0 +1,57 @@
+import { CardBasic } from 'src/components/card';
+import { Basic as BasicType } from 'src/interfaces/shared/name';
+import { formatNumber } from 'src/utils/helpers';
+import styles from 'src/styles/modules/components/name/basic.module.scss';
+
+type Props = {
+  className: string;
+  data: BasicType;
+};
+
+const Basic = ({ data, className }: Props) => {
+  return (
+    <CardBasic className={className} image={data.poster.url} title={data.name}>
+      <div className={styles.ratings}>
+        {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}>{getRankingStats(data.ranking)}</span>)
+            </span>
+          </p>
+        )}
+      </div>
+
+      {!!data.primaryProfessions.length && (
+        <p className={styles.genres}>
+          <span className={styles.heading}>Profession: </span>
+          {data.primaryProfessions.join(', ')}
+        </p>
+      )}
+      {
+        <p className={styles.overview}>
+          <span className={styles.heading}>About: </span>
+          {data.bio.short}...
+        </p>
+      }
+      <p className={styles.genres}>
+        <span className={styles.heading}>Known for: </span>
+        {data.knownFor.title} ({data.knownFor.role})
+      </p>
+    </CardBasic>
+  );
+};
+
+const getRankingStats = (ranking: NonNullable<Props['data']['ranking']>) => {
+  if (ranking.direction === 'FLAT') return '\u2192';
+
+  const change = formatNumber(ranking.change);
+  return (ranking.direction === 'UP' ? '\u2191' : '\u2193') + change;
+};
+
+export default Basic;

src/components/name/Bio.tsx

@@ -0,0 +1,12 @@
+import styles from 'src/styles/modules/components/name/did-you-know.module.scss';
+
+type Props = { bio: string };
+
+const Bio = ({ bio }: Props) => (
+  <section className={styles.bio}>
+    <h2 className='heading heading__secondary'>About</h2>
+    <div dangerouslySetInnerHTML={{ __html: bio }} />
+  </section>
+);
+
+export default Bio;

src/components/name/Credits.tsx

@@ -0,0 +1,73 @@
+import { Credits } from 'src/interfaces/shared/name';
+import { CardTitle } from 'src/components/card';
+import styles from 'src/styles/modules/components/name/credits.module.scss';
+
+type Props = {
+  className: string;
+  data: Credits;
+};
+
+const Credits = ({ className, data }: Props) => {
+  if (!data.total) return null;
+
+  return (
+    <section className={`${className} ${styles.credits}`}>
+      <h2 className='heading heading__secondary'>Credits</h2>
+      <section>
+        <h3 className='heading heading__tertiary'>Released</h3>
+        {data.released.map(
+          (item, i) =>
+            !!item.total && (
+              <details open={i === 0} key={item.category.id}>
+                <summary>
+                  {item.category.text} ({item.total})
+                </summary>
+                <ul className={styles.container} key={item.category.id}>
+                  {item.titles.map(title => (
+                    <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>
+              </details>
+            )
+        )}
+      </section>
+      <section>
+        <h3 className='heading heading__tertiary'>Unreleased</h3>
+        {data.unreleased.map(
+          (item, i) =>
+            !!item.total && (
+              <details open={i === 0} key={item.category.id}>
+                <summary>
+                  {item.category.text} ({item.total})
+                </summary>
+                <ul className={styles.container}>
+                  {item.titles.map(title => (
+                    <CardTitle
+                      key={title.id}
+                      link={`/title/${title.id}`}
+                      name={title.title}
+                      titleType={title.type.text}
+                      image={title.poster?.url}
+                      year={title.releaseYear}
+                    >
+                      <p>{title.productionStatus}</p>
+                    </CardTitle>
+                  ))}
+                </ul>
+              </details>
+            )
+        )}
+      </section>
+    </section>
+  );
+};
+
+export default Credits;

src/components/name/DidYouKnow.tsx

@@ -0,0 +1,53 @@
+import Link from 'next/link';
+import { DidYouKnow } from 'src/interfaces/shared/name';
+import styles from 'src/styles/modules/components/name/did-you-know.module.scss';
+
+type Props = {
+  data: DidYouKnow;
+};
+
+const DidYouKnow = ({ data }: Props) => (
+  <section className={styles.didYouKnow}>
+    <h2 className='heading heading__secondary'>Did you know</h2>
+    <div className={styles.container}>
+      {!!data.trivia?.total && (
+        <section>
+          <h3 className='heading heading__tertiary'>Trivia</h3>
+          <div dangerouslySetInnerHTML={{ __html: data.trivia.html }}></div>
+        </section>
+      )}
+      {!!data.quotes?.total && (
+        <section>
+          <h3 className='heading heading__tertiary'>Quotes</h3>
+          <div dangerouslySetInnerHTML={{ __html: data.quotes.html }}></div>
+        </section>
+      )}
+      {!!data.trademark?.total && (
+        <section>
+          <h3 className='heading heading__tertiary'>Trademark</h3>
+          <div dangerouslySetInnerHTML={{ __html: data.trademark.html }}></div>
+        </section>
+      )}
+      {!!data.nicknames.length && (
+        <section>
+          <h3 className='heading heading__tertiary'>Nicknames</h3>
+          <p>{data.nicknames.join(', ')}</p>
+        </section>
+      )}
+      {!!data.salary?.total && (
+        <section>
+          <h3 className='heading heading__tertiary'>Salary</h3>
+          <p>
+            <span>{data.salary.value} in </span>
+            <Link href={`/title/${data.salary.title.id}`}>
+              <a className={'link'}>{data.salary.title.text}</a>
+            </Link>
+            <span> ({data.salary.title.year})</span>
+          </p>
+        </section>
+      )}
+    </div>
+  </section>
+);
+
+export default DidYouKnow;