Public Access
Gitea #34 slice 2 of 3. Core lists each set once now. The hide duplicates toggle and its param are not needed. PlatformIcons shows a badge per platform (platforms[]).
31 lines
1.1 KiB
React
31 lines
1.1 KiB
React
import {useTranslation} from 'react-i18next';
|
|
|
|
import {platformLabel} from '../utils/platforms.js';
|
|
|
|
// lucide has no brand icons: a short text badge per platform.
|
|
const shortName = ({source, platform}) => {
|
|
if (source === 'STEAM') return 'ST';
|
|
return platform ?? (source === 'PSN' ? 'PS' : 'M');
|
|
};
|
|
|
|
/**
|
|
* @param platforms the {source, platform} of every edition of a library entry, see Core's `platforms`
|
|
*/
|
|
export default function PlatformIcons({platforms}) {
|
|
const {t} = useTranslation();
|
|
if (!platforms?.length) return null;
|
|
return (
|
|
<ul className="flex flex-wrap gap-1">
|
|
{platforms.map((p) => {
|
|
const label = platformLabel(p) ?? t(`LIBRARY.SOURCE.${p.source}`);
|
|
return (
|
|
<li key={`${p.source}:${p.platform ?? ''}`} title={label} aria-label={label}
|
|
className="rounded border px-1 text-[10px] leading-4 font-semibold text-muted-foreground">
|
|
{shortName(p)}
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
);
|
|
}
|