refactor(starter): upgrade and move to typescript

src/components/Sidebar/Contacts/Contacts.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 
 import { Icon } from "@/components/Icon";
+import { ICONS } from "@/constants";
 import { Dictionary } from "@/types";
 import { getContactHref, getIcon } from "@/utils";
 
-import styles from "./Contacts.module.scss";
+import * as styles from "./Contacts.module.scss";
 
 type Props = {
   contacts: Dictionary<string>;
@@ -12,19 +13,21 @@ type Props = {
 
 const Contacts: React.FC<Props> = ({ contacts }: Props) => (
   <div className={styles.contacts}>
-    <ul className={styles.contacts__list}>
-      {Object.keys(contacts).map(name => (
-        <li className={styles["contacts__list-item"]} key={name}>
-          <a
-            className={styles["contacts__list-item-link"]}
-            href={getContactHref(name, contacts[name])}
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            <Icon name={name} icon={getIcon(name)} />
-          </a>
-        </li>
-      ))}
+    <ul className={styles.list}>
+      {(Object.keys(contacts) as Array<keyof typeof ICONS>).map(name =>
+        contacts[name] ? (
+          <li className={styles.item} key={name}>
+            <a
+              className={styles.link}
+              href={getContactHref(name, contacts[name])}
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <Icon name={name} icon={getIcon(name)} />
+            </a>
+          </li>
+        ) : null,
+      )}
     </ul>
   </div>
 );