mirror of
https://github.com/owncast/owncast.git
synced 2024-11-22 21:03:19 +03:00
27a4c8c895
* Experiment with javascript bundling * Experiment with snowpack. Making progress * Success! Uses local js modules and assets and no cdns * Missing local css
42 lines
1.2 KiB
JavaScript
42 lines
1.2 KiB
JavaScript
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>
|
|
`);
|
|
}
|