Improve user details UX on member page (#1889)

frontend/src/components/CardDetailsPage.tsx

@@ -11,6 +11,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import upperFirst from 'lodash/upperFirst'
 import { useRouter } from 'next/navigation'
 import { useSession } from 'next-auth/react'
+import type { JSX } from 'react'
+import { useCallback } from 'react'
 import type { ExtendedSession } from 'types/auth'
 import type { DetailsCardProps } from 'types/card'
 import { IS_PROJECT_HEALTH_ENABLED } from 'utils/env.client'
@@ -33,6 +35,8 @@ import SecondaryCard from 'components/SecondaryCard'
 import SponsorCard from 'components/SponsorCard'
 import ToggleableList from 'components/ToggleableList'
 import TopContributorsList from 'components/TopContributorsList'
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[a-z]{2,}$/i
+const sanitizeForUrl = (str: string) => encodeURIComponent(str.trim())
 
 const DetailsCard = ({
   description,
@@ -67,6 +71,63 @@ const DetailsCard = ({
   type,
   userSummary,
 }: DetailsCardProps) => {
+  const renderDetailValue = useCallback(
+    (detail: { label: string; value: string | JSX.Element }) => {
+      const { label, value } = detail
+
+      if (
+        value == null ||
+        value === '' ||
+        value === 'N/A' ||
+        value === 'Not available' ||
+        value === 'Unknown'
+      ) {
+        return 'N/A'
+      }
+
+      if (typeof value !== 'string') {
+        return value
+      }
+
+      switch (label) {
+        case 'Email':
+          if (!EMAIL_REGEX.test(value)) {
+            return value
+          }
+          return (
+            <a
+              href={`mailto:${sanitizeForUrl(value)}`}
+              className="text-blue-400 hover:underline"
+              aria-label={`Send email to ${value}`}
+            >
+              {value}
+            </a>
+          )
+
+        case 'Company':
+          if (value.startsWith('@')) {
+            const companyName = sanitizeForUrl(value.slice(1))
+            return (
+              <a
+                href={`https://github.com/${companyName}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-blue-400 hover:underline"
+                aria-label={`Visit ${value} on GitHub`}
+              >
+                {value}
+              </a>
+            )
+          }
+          return value
+
+        default:
+          return value
+      }
+    },
+    []
+  )
+
   const { data } = useSession()
   const router = useRouter()
   return (
@@ -135,7 +196,7 @@ const DetailsCard = ({
                 </div>
               ) : (
                 <div key={detail.label} className="pb-1">
-                  <strong>{detail.label}:</strong> {detail?.value || 'Unknown'}
+                  <strong>{detail.label}:</strong> {renderDetailValue(detail)}
                 </div>
               )
             )}