From 85df1519ebc20af5ca2a7e5344ab9f3eab462b98 Mon Sep 17 00:00:00 2001
From: Mike Vesprini <mike@button.is>
Date: Mon, 20 Jun 2022 16:32:41 -0700
Subject: [PATCH] feat: contact details component

---
 app/components/Contact/ContactDetails.tsx | 49 +++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 app/components/Contact/ContactDetails.tsx

diff --git a/app/components/Contact/ContactDetails.tsx b/app/components/Contact/ContactDetails.tsx
new file mode 100644
index 0000000000..4d218810df
--- /dev/null
+++ b/app/components/Contact/ContactDetails.tsx
@@ -0,0 +1,49 @@
+import { graphql, useFragment } from "react-relay";
+import { ContactDetails_contact$key } from "__generated__/ContactDetails_contact.graphql";
+
+interface Props {
+  contact: ContactDetails_contact$key;
+}
+
+const ContactDetails: React.FC<Props> = ({ contact }) => {
+  const contactDetails = useFragment(
+    graphql`
+      fragment ContactDetails_contact on Contact {
+        email
+        companyName
+        contactPosition
+      }
+    `,
+    contact
+  );
+
+  const { email, companyName, contactPosition } = contactDetails;
+
+  return (
+    <div>
+      <p>
+        <span>Email</span> {email}
+      </p>
+      {companyName && (
+        <p>
+          <span>Company</span> {companyName}
+        </p>
+      )}
+      {contactPosition && (
+        <p>
+          <span>Position</span> {contactPosition}
+        </p>
+      )}
+      <style jsx>{`
+        div p {
+          margin-bottom: 0;
+        }
+        div span {
+          font-weight: bold;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default ContactDetails;