57 lines
1.6 KiB
JavaScript
57 lines
1.6 KiB
JavaScript
|
import html from '../utils/html.js'
|
||
|
|
import markdown from '../utils/markdown.js'
|
||
|
|
import Icon from './icon.js'
|
||
|
|
import Link from './link.js'
|
||
|
|
|
||
|
|
const formatCountry = countryCode => Intl.DisplayNames
|
||
|
|
? new Intl.DisplayNames(['en'], { type: 'region' }).of(countryCode)
|
||
|
|
: countryCode
|
||
|
|
|
||
|
|
export default function Header(basics = {}) {
|
||
|
|
const { email, image, label, location, name, phone, profiles = [], summary, url } = basics
|
||
|
|
|
||
|
|
return html`
|
||
|
|
<header class="masthead">
|
||
|
|
${image && html`<img src="${image}" alt="">`}
|
||
|
|
<div>
|
||
|
|
${name && html`<h1>${name}</h1>`}
|
||
|
|
${label && html`<h2>${label}</h2>`}
|
||
|
|
</div>
|
||
|
|
${summary && html`<article>${markdown(summary)}</article>`}
|
||
|
|
<ul class="icon-list">
|
||
|
|
${location?.city && html`
|
||
|
|
<li>
|
||
|
|
${Icon('map-pin')}
|
||
|
|
${location.city}${location.countryCode && html`, ${formatCountry(location.countryCode)}`}
|
||
|
|
</li>
|
||
|
|
`}
|
||
|
|
${email && html`
|
||
|
|
<li>
|
||
|
|
${Icon('mail')}
|
||
|
|
<a href="mailto:${email}">${email}</a>
|
||
|
|
</li>
|
||
|
|
`}
|
||
|
|
${phone && html`
|
||
|
|
<li>
|
||
|
|
${Icon('phone')}
|
||
|
|
<a href="tel:${phone.replace(/\s/g, '')}">${phone}</a>
|
||
|
|
</li>
|
||
|
|
`}
|
||
|
|
${url && html`
|
||
|
|
<li>
|
||
|
|
${Icon('link')}
|
||
|
|
${Link(url)}
|
||
|
|
</li>
|
||
|
|
`}
|
||
|
|
${profiles.map(({ network, url, username }) => html`
|
||
|
|
<li>
|
||
|
|
${Icon(network, 'user')}
|
||
|
|
${Link(url, username)}
|
||
|
|
${network && html`<span class="network">(${network})</span>`}
|
||
|
|
</li>
|
||
|
|
`)}
|
||
|
|
</ul>
|
||
|
|
</header>
|
||
|
|
`
|
||
|
|
}
|