|
|
@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react' |
|
|
|
import { usePersonContext } from './PersonContext' |
|
|
|
import Container from 'react-bootstrap/esm/Container' |
|
|
|
import { useAutoFocus } from '../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> |
|
|
@@ -21,10 +22,10 @@ export function Contact(props: {icon?: string, text: string}) { |
|
|
|
textElement = <a href={url} className='contact-link' target='_blank'>{props.text}</a> |
|
|
|
} |
|
|
|
return ( |
|
|
|
<span className='contact'> |
|
|
|
<Col className='contact'> |
|
|
|
<i className={'bi-' + props.icon}> </i> |
|
|
|
{textElement} |
|
|
|
</span> |
|
|
|
</Col> |
|
|
|
) |
|
|
|
} |
|
|
|
|
|
|
@@ -32,11 +33,13 @@ export function Contacts() { |
|
|
|
const person = usePersonContext() |
|
|
|
const focus = useAutoFocus<HTMLDivElement>('contacts') |
|
|
|
return ( |
|
|
|
<Container ref={focus} className='contacts'> |
|
|
|
<Container ref={focus} className='contacts' fluid> |
|
|
|
<h2>Contacts</h2> |
|
|
|
<Row> |
|
|
|
{person.contacts.map((contact, index) => ( |
|
|
|
<Contact key={index} {...contact} /> |
|
|
|
))} |
|
|
|
</Row> |
|
|
|
</Container> |
|
|
|
) |
|
|
|
} |