feat(route): add name route

adds much needed route

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

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;