From d6501936a7153048d85f3a92d1a19eaabf67f783 Mon Sep 17 00:00:00 2001
From: Dejvino <git.dejvino.cz@dejvino.cz>
Date: Thu, 25 May 2023 21:01:22 +0200
Subject: [PATCH] Add contacts

---
 src/PersonalData.ts             |  5 ++++
 src/PersonalDataTypes.ts        |  6 +++++
 src/app/FocusedElement.tsx      |  2 +-
 src/app/components/Contacts.tsx | 42 +++++++++++++++++++++++++++++++++
 src/app/globals.css             | 12 ++++++----
 src/app/page.tsx                |  2 ++
 6 files changed, 64 insertions(+), 5 deletions(-)
 create mode 100644 src/app/components/Contacts.tsx

diff --git a/src/PersonalData.ts b/src/PersonalData.ts
index aa1c7ec..6ae0b5c 100644
--- a/src/PersonalData.ts
+++ b/src/PersonalData.ts
@@ -4,6 +4,11 @@ export const personalData: PersonalData = {
     name: "David Hrdina Němeček",
     brief: "Software developer, people manager.",
 
+    contacts: [
+        {icon: 'browser-firefox', text: 'www.dejvino.cz'},
+        {icon: 'envelope-at', text: 'explosive@dejvino.cz'},
+        {icon: 'git', text: 'https://git.dejvino.cz'}
+    ],
     jobs: {
         current: {
             position: 'Janitor',
diff --git a/src/PersonalDataTypes.ts b/src/PersonalDataTypes.ts
index 09d8c95..85e8a5c 100644
--- a/src/PersonalDataTypes.ts
+++ b/src/PersonalDataTypes.ts
@@ -1,3 +1,8 @@
+export type Contact = {
+    icon?: string,
+    text: string
+}
+
 export type Job = {
     position: string,
     company: string,
@@ -19,6 +24,7 @@ export type Skills = {
 export type PersonalData = {
     name: string,
     brief: string,
+    contacts: Contact[],
     jobs: Jobs,
     skills: Skills,
     interests: string[]
diff --git a/src/app/FocusedElement.tsx b/src/app/FocusedElement.tsx
index 10e2a10..fc9edfb 100644
--- a/src/app/FocusedElement.tsx
+++ b/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
             }
diff --git a/src/app/components/Contacts.tsx b/src/app/components/Contacts.tsx
new file mode 100644
index 0000000..302a3dd
--- /dev/null
+++ b/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>
+    )
+}
\ No newline at end of file
diff --git a/src/app/globals.css b/src/app/globals.css
index 4070cef..e3aeffa 100644
--- a/src/app/globals.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 683037d..aae3a45 100644
--- a/src/app/page.tsx
+++ b/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>