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 { interface IBadge {
title: React.ReactNode, title: React.ReactNode,
slug: 'patron' | 'donor' | 'admin' | 'moderator' | 'bot' | 'opaque', slug: string,
} }
/** Badge to display on a user's profile. */ /** Badge to display on a user's profile. */
const Badge: React.FC<IBadge> = ({ title, slug }) => ( const Badge: React.FC<IBadge> = ({ title, slug }) => {
<span const fallback = !['patron', 'admin', 'moderator', 'opaque', 'donor', 'badge:donor'].includes(slug);
data-testid='badge'
className={classNames('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', { return (
'bg-fuchsia-700 text-white': slug === 'patron', <span
'bg-yellow-500 text-white': slug === 'donor', data-testid='badge'
'bg-black text-white': slug === 'admin', className={classNames('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', {
'bg-cyan-600 text-white': slug === 'moderator', 'bg-fuchsia-700 text-white': slug === 'patron',
'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100': slug === 'bot', 'bg-yellow-500 text-white': ['donor', 'badge:donor'].includes(slug),
'bg-white bg-opacity-75 text-gray-900': slug === 'opaque', '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,
{title} 'bg-white bg-opacity-75 text-gray-900': slug === 'opaque',
</span> })}
); >
{title}
</span>
);
};
export default Badge; 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 VerificationBadge from 'soapbox/components/verification_badge';
import { useSoapboxConfig } from 'soapbox/hooks'; import { useSoapboxConfig } from 'soapbox/hooks';
import { isLocal } from 'soapbox/utils/accounts'; 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 ProfileFamiliarFollowers from './profile_familiar_followers';
import ProfileStats from './profile_stats'; 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 getBadges = (): React.ReactNode[] => {
const custom = getCustomBadges();
const staffBadge = getStaffBadge(); const staffBadge = getStaffBadge();
const isPatron = account.getIn(['patron', 'is_patron']) === true; 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' />); badges.push(<Badge slug='patron' title='Patron' key='patron' />);
} }
if (account.donor) { return [...badges, ...custom];
badges.push(<Badge slug='donor' title='Donor' key='donor' />);
}
return badges;
}; };
const renderBirthday = (): React.ReactNode => { const renderBirthday = (): React.ReactNode => {