add contact pages and blocks

2024-06-24 05:11:55 +02:00
parent 944506cc2f
commit 15e4e70806
30 changed files with 1448 additions and 51 deletions
@@ -0,0 +1,50 @@
+import { ContactEntityBlock as ContactEntityBlockType } from "@/gql/graphql";
+import styles from "./contactEntityBlock.module.scss";
+import { formatNorwegianPhoneNumber, formatPhoneE164 } from "@/lib/common";
+
+export const ContactEntityBlock = ({
+  block,
+}: {
+  block: ContactEntityBlockType;
+}) => {
+  // TODO: image
+
+  const contact = block?.contactEntity;
+
+  if (!contact) {
+    return <></>;
+  }
+
+  const phoneE164 = contact.phoneNumber && formatPhoneE164(contact.phoneNumber);
+  const phoneFormatted = phoneE164 && formatNorwegianPhoneNumber(phoneE164);
+
+  return (
+    <li className={styles.contactItem}>
+      <div className={styles.image}></div>
+      <div className={styles.text}>
+        <h1 className={styles.name}>{contact.name}</h1>
+        {contact.title && <p className={styles.role}>{contact.title}</p>}
+        {(contact.email || phoneE164) && (
+          <ul className={styles.contact}>
+            {contact.email && (
+              <li>
+                <span className={styles.icon}>&#9993;&nbsp;</span>
+                <a href={`mailto:${contact.email}`} target="_blank">
+                  {contact.email}
+                </a>
+              </li>
+            )}
+            {phoneE164 && (
+              <li>
+                <span className={styles.icon}>&#9742;&nbsp;</span>
+                <a href={`tel:${phoneE164}`} target="_blank">
+                  {phoneFormatted}
+                </a>
+              </li>
+            )}
+          </ul>
+        )}
+      </div>
+    </li>
+  );
+};