Navy.gif/owncast
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 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);
function SocialIcon(props) {
const { platform, icon, url } = props;
const iconSupplied = !!icon;
const name = platform;
const { platform, icon, url } = props;
const iconSupplied = !!icon;
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({
'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,
});
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 bg-no-repeat"
style=${style}
title="Find me on ${name}"
></span>
<span class=${labelClass}>Find me on ${name}</span>
</a>
`;
return html`
<a class=${itemClass} target="_blank" rel="me" href=${url}>
<span
class="platform-icon 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 { 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>
`
);
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>`;
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>`;
}