add icons to contact info

justin-hackin · Feb 10, 2023 · a37309c · a37309c
1 parent 225686c
commit a37309c
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 9 deletions.
diff --git a/src/cms-integration/markdown/private.ts b/src/cms-integration/markdown/private.ts
@@ -3,9 +3,11 @@ import fs from 'fs/promises';
 import { marked } from 'marked';
 import path from 'path';
 import invariant from 'tiny-invariant';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 
 export interface PrivateInformationMarkdownAttributes {
   label: string;
+  icon: IconProp;
 }
 
 export interface CMSPrivateInformation {

diff --git a/src/cms-integration/prismic/private.ts b/src/cms-integration/prismic/private.ts
@@ -1,11 +1,20 @@
 import { CMSPrivateInformation } from '../markdown/private';
 import { cmsClient } from './common';
 import { asHTML } from '@prismicio/helpers';
+import {
+  faEnvelopeSquare,
+  faPhoneAlt,
+} from '@fortawesome/free-solid-svg-icons';
 
 const stripParagraphHtmlSerializer = {
   paragraph: ({ children, key, type, node, text }) => `${children}`,
 };
 
+const iconNameToIcon = {
+  'envelope-square': faEnvelopeSquare,
+  'phone-alt': faPhoneAlt,
+};
+
 export const prismicGetPrivateInformation = async (): Promise<
   CMSPrivateInformation[]
 > => {
@@ -16,6 +25,7 @@ export const prismicGetPrivateInformation = async (): Promise<
     slug: id,
     attributes: {
       label: data.label,
+      icon: iconNameToIcon[data.icon_name],
     },
     html: asHTML(data.content, null, stripParagraphHtmlSerializer),
   }));

diff --git a/src/components/Articles/ContactInformation.tsx b/src/components/Articles/ContactInformation.tsx
@@ -1,8 +1,9 @@
-import { faIdCard } from '@fortawesome/free-solid-svg-icons';
+import { faIdCard, faMapMarkerAlt } from '@fortawesome/free-solid-svg-icons';
 import React from 'react';
 import { CMSPersonalInformation } from '../../cms-integration/markdown/personal';
 import { CMSPrivateInformation } from '../../cms-integration/markdown/private';
 import { SectionHeading } from '../SectionHeading/SectionHeading';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 interface ContactInformationProps {
   personalInformation: CMSPersonalInformation;
@@ -13,20 +14,33 @@ export const ContactInformation: React.FC<ContactInformationProps> = ({
   personalInformation,
   privateInformation,
 }) => {
+  const contactInfo: CMSPrivateInformation[] = [
+    {
+      slug: 'location',
+      attributes: {
+        label: 'Location',
+        icon: faMapMarkerAlt,
+      },
+      html: personalInformation.attributes.location,
+    },
+    ...privateInformation,
+  ];
   return (
     <article>
       <SectionHeading icon={faIdCard} level={3} text="Contact Information" />
 
       <ul className="mt-2">
-        <li>
-          <strong>Location:</strong> {personalInformation.attributes.location}
-        </li>
-
         {/* private access required */}
-        {privateInformation?.map((privateField) => (
-          <li className="mt-3" key={privateField.attributes.label}>
-            <strong>{`${privateField.attributes.label}: `}</strong>
-            <span dangerouslySetInnerHTML={{ __html: privateField.html }} />
+        {contactInfo?.map((infoField) => (
+          <li className="mt-3" key={infoField.attributes.label}>
+            <FontAwesomeIcon
+              className={'mr-2'}
+              icon={infoField.attributes.icon}
+            />
+            <strong
+              className={'mr-0.5'}
+            >{`${infoField.attributes.label}: `}</strong>
+            <span dangerouslySetInnerHTML={{ __html: infoField.html }} />
           </li>
         ))}
       </ul>