92 lines
3.1 KiB
TypeScript
92 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
|
|
import {FormattedMessage} from 'react-intl';
|
|
|
|
import {AllBadgesBadge} from '../../types/badges';
|
|
import BadgeImage from '../utils/badge_image';
|
|
import {markdown} from 'utils/markdown';
|
|
|
|
import './all_badges_row.scss';
|
|
|
|
type Props = {
|
|
badge: AllBadgesBadge;
|
|
onClick: (badge: AllBadgesBadge) => void;
|
|
}
|
|
|
|
function getGrantedText(badge: AllBadgesBadge): React.ReactNode {
|
|
if (badge.granted === 0) {
|
|
return (
|
|
<FormattedMessage
|
|
id='badges.granted.not_yet'
|
|
defaultMessage='Ещё не выдан.'
|
|
/>
|
|
);
|
|
}
|
|
if (badge.multiple) {
|
|
return (
|
|
<FormattedMessage
|
|
id='badges.granted.multiple'
|
|
defaultMessage='Выдан {times, plural, one {# раз} few {# раза} many {# раз} other {# раз}} {users, plural, one {# пользователю} few {# пользователям} many {# пользователям} other {# пользователям}}.'
|
|
values={{times: badge.granted_times, users: badge.granted}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<FormattedMessage
|
|
id='badges.granted.single'
|
|
defaultMessage='Выдан {users, plural, one {# пользователю} few {# пользователям} many {# пользователям} other {# пользователям}}.'
|
|
values={{users: badge.granted}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const AllBadgesRow: React.FC<Props> = ({badge, onClick}: Props) => {
|
|
return (
|
|
<div
|
|
className='AllBadgesRow'
|
|
onClick={() => onClick(badge)}
|
|
>
|
|
<span className='badge-icon'>
|
|
<BadgeImage
|
|
badge={badge}
|
|
size={36}
|
|
/>
|
|
</span>
|
|
<div className='badge-text'>
|
|
<div className='badge-name'>
|
|
<span className='badge-label'>
|
|
<FormattedMessage
|
|
id='badges.label.name'
|
|
defaultMessage='Название:'
|
|
/>
|
|
</span>
|
|
{' '}
|
|
{badge.name}
|
|
</div>
|
|
<div className='badge-description'>
|
|
<span className='badge-label'>
|
|
<FormattedMessage
|
|
id='badges.label.description'
|
|
defaultMessage='Описание:'
|
|
/>
|
|
</span>
|
|
{' '}
|
|
{badge.description ? markdown(badge.description) : '-'}
|
|
</div>
|
|
<div className='badge-meta'>
|
|
<FormattedMessage
|
|
id='badges.label.type'
|
|
defaultMessage='Тип: {typeName}'
|
|
values={{typeName: badge.type_name}}
|
|
/>
|
|
{' · '}
|
|
{getGrantedText(badge)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AllBadgesRow;
|