Add contacts

src/app/FocusedElement.tsx

@@ -57,7 +57,7 @@ export function useAutoFocus<ElementType extends HTMLElement>(elementKey: string
                 focusElement()
             }
             const classNameBackup = elem.className
-            elem.className += ' ' + focusedClass
+            elem.className += ' focusable ' + focusedClass
             cleanup = () => {
                 elem.className = classNameBackup
             }

src/app/components/Contacts.tsx

@@ -0,0 +1,42 @@
+import React, { ReactNode } from 'react'
+import { usePersonContext } from './PersonContext'
+import Container from 'react-bootstrap/esm/Container'
+import { useAutoFocus } from '../FocusedElement'
+
+export function Contact(props: {icon?: string, text: string}) {
+    let textElement: ReactNode = <span className='contact-text'>{props.text}</span>
+    if (props.text.match(/^(www|http)/)) {
+        let text = props.text
+        let url = text
+        const urlMatch = text.match(/^https?:\/\/(.+)\/?$/)
+        if (urlMatch) {
+            text = urlMatch[1]
+        } else {
+            url = `https://${props.text}`
+        }
+        textElement = <a href={url} className='contact-link' target='_blank'>{text}</a>
+    }
+    if (props.text.match(/.+@.+\..+/)) {
+        const url = `mailto:${props.text}`
+        textElement = <a href={url} className='contact-link' target='_blank'>{props.text}</a>
+    }
+    return (
+        <span className='contact'>
+            <i className={'bi-' + props.icon}> </i>
+            {textElement}
+        </span>
+    )
+}
+
+export function Contacts() {
+    const person = usePersonContext()
+    const focus = useAutoFocus<HTMLDivElement>('contacts')
+    return (
+        <Container ref={focus} className='contacts'>
+            <h2>Contacts</h2>
+            {person.contacts.map((contact, index) => (
+                <Contact key={index} {...contact} />
+            ))}
+        </Container>
+    )
+}

src/app/globals.css

@@ -23,12 +23,16 @@
 .tag-badges > span {
     margin: 0.4em;
 }
-.tag-badges > span {
+.focusable {
     transition: all 0.3s;
 }
-.tag-badges > span:hover {
-    filter: brightness(95%);
+.focusable:hover {
+    background-color: rgba(236, 241, 245, 0.3);
+    filter: brightness(96%);
 }
 .focused-element {
-    border: 2px solid red;
+    border: 2px dashed red;
+}
+.contacts .contact {
+    margin: 0.75em;
 }

src/app/page.tsx

@@ -4,12 +4,14 @@ import Container from 'react-bootstrap/Container';
 import JobsHistory from './components/JobsHistory';
 import AboutBrief from './components/AboutBrief';
 import Skills from './components/Skills';
+import { Contacts } from './components/Contacts';
 
 export default function Home() {
   return (
 
     <Container fluid='xxl'>
       <AboutBrief />
+      <Contacts />
       <JobsHistory />
       <Skills />
     </Container>