|
|
@@ -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> |
|
|
|
) |
|
|
|
} |