moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Display custom badges on profiles

This commit is contained in:
Alex Gleason 2022-09-11 20:17:40 -05:00
parent 2e811a1e88
commit 2fc9b215a9
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 36 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/soapbox/components/badge.tsx
View File

@ -3,24 +3,27 @@ import React from 'react';
interface IBadge {
title: React.ReactNode,
slug: 'patron' | 'donor' | 'admin' | 'moderator' | 'bot' | 'opaque',
slug: string,
}
/** Badge to display on a user's profile. */
const Badge: React.FC<IBadge> = ({ title, slug }) => (
<span
data-testid='badge'
className={classNames('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', {
'bg-fuchsia-700 text-white': slug === 'patron',
'bg-yellow-500 text-white': slug === 'donor',
'bg-black text-white': slug === 'admin',
'bg-cyan-600 text-white': slug === 'moderator',
'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100': slug === 'bot',
'bg-white bg-opacity-75 text-gray-900': slug === 'opaque',
})}
>
{title}
</span>
);
const Badge: React.FC<IBadge> = ({ title, slug }) => {
const fallback = !['patron', 'admin', 'moderator', 'opaque', 'donor', 'badge:donor'].includes(slug);
return (
<span
data-testid='badge'
className={classNames('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', {
'bg-fuchsia-700 text-white': slug === 'patron',
'bg-yellow-500 text-white': ['donor', 'badge:donor'].includes(slug),
'bg-black text-white': slug === 'admin',
'bg-cyan-600 text-white': slug === 'moderator',
'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100': fallback,
'bg-white bg-opacity-75 text-gray-900': slug === 'opaque',
})}
>
{title}
</span>
);
};
export default Badge;

21
app/soapbox/features/ui/components/profile_info_panel.tsx
View File

@ -8,6 +8,8 @@ import { Icon, HStack, Stack, Text } from 'soapbox/components/ui';
import VerificationBadge from 'soapbox/components/verification_badge';
import { useSoapboxConfig } from 'soapbox/hooks';
import { isLocal } from 'soapbox/utils/accounts';
import { badgeToTag, getBadges as getAccountBadges } from 'soapbox/utils/badges';
import { capitalize } from 'soapbox/utils/strings';
import ProfileFamiliarFollowers from './profile_familiar_followers';
import ProfileStats from './profile_stats';
@ -52,7 +54,20 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
}
};
const getCustomBadges = (): React.ReactNode[] => {
const badges = getAccountBadges(account);
return badges.map(badge => (
<Badge
key={badge}
slug={badge}
title={capitalize(badgeToTag(badge))}
/>
));
};
const getBadges = (): React.ReactNode[] => {
const custom = getCustomBadges();
const staffBadge = getStaffBadge();
const isPatron = account.getIn(['patron', 'is_patron']) === true;
@ -66,11 +81,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
badges.push(<Badge slug='patron' title='Patron' key='patron' />);
}
if (account.donor) {
badges.push(<Badge slug='donor' title='Donor' key='donor' />);
}
return badges;
return [...badges, ...custom];
};
const renderBirthday = (): React.ReactNode => {