You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
1.6 KiB
70 lines
1.6 KiB
import { h } from '/js/web_modules/preact.js'; |
|
import htm from '/js/web_modules/htm.js'; |
|
import { classNames } from '../utils/helpers.js'; |
|
|
|
const html = htm.bind(h); |
|
|
|
function SocialIcon(props) { |
|
const { platform, icon, url } = props; |
|
const iconSupplied = !!icon; |
|
const name = platform; |
|
|
|
const finalIcon = iconSupplied ? icon : '/img/platformlogos/default.svg'; |
|
|
|
const style = `background-image: url(${finalIcon});`; |
|
|
|
const itemClass = classNames({ |
|
'user-social-item': true, |
|
flex: true, |
|
'justify-start': true, |
|
'items-center': true, |
|
'm-1': true, |
|
}); |
|
const labelClass = classNames({ |
|
'platform-label': true, |
|
'visually-hidden': !!finalIcon, |
|
'text-indigo-800': true, |
|
'text-xs': true, |
|
uppercase: true, |
|
'max-w-xs': true, |
|
'inline-block': true, |
|
}); |
|
|
|
return html` |
|
<a class=${itemClass} target="_blank" rel="me" href=${url}> |
|
<span |
|
class="platform-icon rounded-lg bg-no-repeat" |
|
style=${style} |
|
title="Find me on ${name}" |
|
></span> |
|
<span class=${labelClass}>Find me on ${name}</span> |
|
</a> |
|
`; |
|
} |
|
|
|
export default function (props) { |
|
const { handles } = props; |
|
if (handles == null) { |
|
return null; |
|
} |
|
|
|
const list = handles.map( |
|
(item, index) => html` |
|
<li key="social${index}"> |
|
<${SocialIcon} |
|
platform=${item.platform} |
|
icon=${item.icon} |
|
url=${item.url} |
|
/> |
|
</li> |
|
` |
|
); |
|
|
|
return html` <ul id="social-list" class="social-list m-2 text-center"> |
|
<p |
|
class="follow-icon-list flex flex-row items-center justify-center flex-wrap" |
|
> |
|
${list} |
|
</p> |
|
</ul>`; |
|
}
|
|
|