gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-05-07 12:16:14 +00:00
Code Issues Actions 36 Packages Projects Releases Wiki Activity

refactor: Badge

Browse Source
This commit is contained in:
scarf 2025-03-27 02:10:09 +09:00
parent 733c1171b1
commit 1fa95e13cd
No known key found for this signature in database
GPG Key ID: 07CA0A3CCA037E7D
2 changed files with 45 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/javascript/mastodon/components/badge.jsx
View File

@ -1,31 +0,0 @@
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import GroupsIcon from '@/material-icons/400-24px/group.svg?react';
import PersonIcon from '@/material-icons/400-24px/person.svg?react';
import SmartToyIcon from '@/material-icons/400-24px/smart_toy.svg?react';
export const Badge = ({ icon = <PersonIcon />, label, domain, roleId }) => (
<div className='account-role' data-account-role-id={roleId}>
{icon}
{label}
{domain && <span className='account-role__domain'>{domain}</span>}
</div>
);
Badge.propTypes = {
icon: PropTypes.node,
label: PropTypes.node,
domain: PropTypes.node,
roleId: PropTypes.string
};
export const GroupBadge = () => (
<Badge icon={<GroupsIcon />} label={<FormattedMessage id='account.badges.group' defaultMessage='Group' />} />
);
export const AutomatedBadge = () => (
<Badge icon={<SmartToyIcon />} label={<FormattedMessage id='account.badges.bot' defaultMessage='Automated' />} />
);

45
app/javascript/mastodon/components/badge.tsx Normal file
View File

@ -0,0 +1,45 @@
import type { FC, ReactNode } from 'react';
import { FormattedMessage } from 'react-intl';
import GroupsIcon from '@/material-icons/400-24px/group.svg?react';
import PersonIcon from '@/material-icons/400-24px/person.svg?react';
import SmartToyIcon from '@/material-icons/400-24px/smart_toy.svg?react';
interface BadgeProps {
icon?: ReactNode;
label?: ReactNode;
domain?: ReactNode;
roleId?: string;
}
export const Badge: FC<BadgeProps> = ({
icon = <PersonIcon />,
label,
domain,
roleId,
}) => (
<div className='account-role' data-account-role-id={roleId}>
{icon}
{label}
{domain && <span className='account-role__domain'>{domain}</span>}
</div>
);
export const GroupBadge = () => (
<Badge
icon={<GroupsIcon />}
label={
<FormattedMessage id='account.badges.group' defaultMessage='Group' />
}
/>
);
export const AutomatedBadge = () => (
<Badge
icon={<SmartToyIcon />}
label={
<FormattedMessage id='account.badges.bot' defaultMessage='Automated' />
}
/>
);