First-class profile name rendering

ts/components/InContactsIcon.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import Tooltip from 'react-tooltip-lite';
+
+import { LocalizerType } from '../types/Util';
+
+type PropsType = {
+  i18n: LocalizerType;
+};
+
+export const InContactsIcon = (props: PropsType): JSX.Element => {
+  const { i18n } = props;
+
+  return (
+    <Tooltip
+      tagName="span"
+      direction="bottom"
+      className="module-in-contacts-icon__tooltip"
+      arrowSize={8}
+      content={i18n('contactInAddressBook')}
+      distance={13}
+      hoverDelay={0}
+    >
+      <span
+        tabIndex={0}
+        role="img"
+        aria-label={i18n('contactInAddressBook')}
+        className="module-in-contacts-icon__icon"
+      />
+    </Tooltip>
+  );
+};