mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-26 06:46:01 +03:00
Code Issues Projects Releases Packages Wiki Activity

Prettified Code!

Browse source
This commit is contained in:
gabek 2022-08-17 16:36:23 +00:00 committed by GitHub Action
parent 56ad654a02
commit cb71fc06cb
1 changed files with 53 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

106
webroot/js/components/platform-logos-list.js
View file

@ -5,66 +5,66 @@ import { classNames } from '../utils/helpers.js';
const html = htm.bind(h); const html = htm.bind(h);
function SocialIcon(props) { function SocialIcon(props) {
const { platform, icon, url } = props; const { platform, icon, url } = props;
const iconSupplied = !!icon; const iconSupplied = !!icon;
const name = platform; const name = platform;
const finalIcon = iconSupplied ? icon : '/img/platformlogos/default.svg'; const finalIcon = iconSupplied ? icon : '/img/platformlogos/default.svg';
const style = `background-image: url(${finalIcon});`; const style = `background-image: url(${finalIcon});`;
const itemClass = classNames({ const itemClass = classNames({
'user-social-item': true, 'user-social-item': true,
flex: true, flex: true,
'justify-start': true, 'justify-start': true,
'items-center': true, 'items-center': true,
'm-1': true, 'm-1': true,
}); });
const labelClass = classNames({ const labelClass = classNames({
'platform-label': true, 'platform-label': true,
'visually-hidden': !!finalIcon, 'visually-hidden': !!finalIcon,
'text-indigo-800': true, 'text-indigo-800': true,
'text-xs': true, 'text-xs': true,
uppercase: true, uppercase: true,
'max-w-xs': true, 'max-w-xs': true,
'inline-block': true, 'inline-block': true,
}); });
return html` return html`
<a class=${itemClass} target="_blank" rel="me" href=${url}> <a class=${itemClass} target="_blank" rel="me" href=${url}>
<span <span
class="platform-icon bg-no-repeat" class="platform-icon bg-no-repeat"
style=${style} style=${style}
title="Find me on ${name}" title="Find me on ${name}"
></span> ></span>
<span class=${labelClass}>Find me on ${name}</span> <span class=${labelClass}>Find me on ${name}</span>
</a> </a>
`; `;
} }
export default function (props) { export default function (props) {
const { handles } = props; const { handles } = props;
if (handles == null) { if (handles == null) {
return null; return null;
} }
const list = handles.map( const list = handles.map(
(item, index) => html` (item, index) => html`
<li key="social${index}"> <li key="social${index}">
<${SocialIcon} <${SocialIcon}
platform=${item.platform} platform=${item.platform}
icon=${item.icon} icon=${item.icon}
url=${item.url} url=${item.url}
/> />
</li> </li>
` `
); );
return html` <ul id="social-list" class="social-list m-2 text-center"> return html` <ul id="social-list" class="social-list m-2 text-center">
<p <p
class="follow-icon-list flex flex-row items-center justify-center flex-wrap" class="follow-icon-list flex flex-row items-center justify-center flex-wrap"
> >
${list} ${list}
</p> </p>
</ul>`; </ul>`;
} }