lbry-desktop/ui/component/common/premium-badge.jsx
infinite-persistence 98d653a8f8
Membership: i18n fixes + add strings
- Variable names are for translators to determine the context, so choose more relevant names. e.g 'displayedInterval' and 'date_range' will not make much sense to a non-programmer.

- No need to localize dev-only strings.

- Various other fixes.
2022-03-16 15:22:19 +08:00

46 lines
1.2 KiB
JavaScript

// @flow
import 'scss/component/_comment-badge.scss';
import * as ICONS from 'constants/icons';
import React from 'react';
import CommentBadge from './comment-badge';
import Button from 'component/button';
type Props = {
membership: ?string,
linkPage?: boolean,
placement?: string,
className?: string,
hideTooltip?: boolean,
};
export default function PremiumBadge(props: Props) {
const { membership, linkPage, placement, className, hideTooltip } = props;
const badgeToShow = membership === 'Premium' ? 'silver' : membership === 'Premium+' ? 'gold' : null;
if (!badgeToShow) return null;
const badgeProps = { size: 40, placement, hideTooltip, className };
return (
<BadgeWrapper linkPage={linkPage}>
{badgeToShow === 'silver' ? (
<CommentBadge label={__('Premium')} icon={ICONS.PREMIUM} {...badgeProps} />
) : (
badgeToShow === 'gold' && <CommentBadge label={__('Premium+')} icon={ICONS.PREMIUM_PLUS} {...badgeProps} />
)}
</BadgeWrapper>
);
}
type WrapperProps = {
linkPage?: boolean,
children: any,
};
const BadgeWrapper = (props: WrapperProps) => {
const { linkPage, children } = props;
return linkPage ? <Button navigate="/$/membership">{children}</Button> : children;
};