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.
42 lines
1.2 KiB
42 lines
1.2 KiB
import { h } from '/js/web_modules/preact.js'; |
|
import htm from '/js/web_modules/htm.js'; |
|
const html = htm.bind(h); |
|
import { SOCIAL_PLATFORMS } from '../utils/social.js'; |
|
import { classNames } from '../utils/helpers.js'; |
|
|
|
export default function SocialIcon(props) { |
|
const { platform, url } = props; |
|
const platformInfo = SOCIAL_PLATFORMS[platform.toLowerCase()]; |
|
const inList = !!platformInfo; |
|
const imgRow = inList ? platformInfo.imgPos[0] : 0; |
|
const imgCol = inList ? platformInfo.imgPos[1] : 0; |
|
|
|
const name = inList ? platformInfo.name : platform; |
|
|
|
const style = `--imgRow: -${imgRow}; --imgCol: -${imgCol};`; |
|
const itemClass = classNames({ |
|
"user-social-item": true, |
|
"flex": true, |
|
"justify-start": true, |
|
"items-center": true, |
|
"-mr-1": true, |
|
"use-default": !inList, |
|
}); |
|
const labelClass = classNames({ |
|
"platform-label": true, |
|
"visually-hidden": inList, |
|
"text-indigo-800": true, |
|
"text-xs": true, |
|
"uppercase": true, |
|
"max-w-xs": true, |
|
"inline-block": true, |
|
}); |
|
|
|
return ( |
|
html` |
|
<a class=${itemClass} target="_blank" href=${url}> |
|
<span class="platform-icon rounded-lg bg-no-repeat" style=${style}></span> |
|
<span class=${labelClass}>Find me on ${name}</span> |
|
</a> |
|
`); |
|
}
|
|
|