46 lines
1.5 KiB
TypeScript
46 lines
1.5 KiB
TypeScript
import React, { ReactNode } from 'react'
|
|
import { usePersonContext } from '../hooks/PersonContext'
|
|
import Container from 'react-bootstrap/esm/Container'
|
|
import { useAutoFocus } from '../hooks/FocusedElement'
|
|
import { Col, Row } from 'react-bootstrap'
|
|
|
|
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 (
|
|
<Col className='contact' xs={'auto'}>
|
|
<i className={'bi-' + props.icon}></i> {textElement}
|
|
</Col>
|
|
)
|
|
}
|
|
|
|
export function Contacts() {
|
|
const person = usePersonContext()
|
|
const focus = useAutoFocus<HTMLDivElement>('contacts')
|
|
return (
|
|
<Container ref={focus} className='contacts' fluid>
|
|
<Row>
|
|
<h2>Contacts</h2>
|
|
</Row>
|
|
<Row>
|
|
{person.contacts.map((contact, index) => (
|
|
<Contact key={index} {...contact} />
|
|
))}
|
|
</Row>
|
|
</Container>
|
|
)
|
|
} |