Display user badges
This commit is contained in:
parent
927c22ef73
commit
f647c4e053
95 changed files with 2891 additions and 424 deletions
48
ts/components/BadgeImage.tsx
Normal file
48
ts/components/BadgeImage.tsx
Normal file
|
@ -0,0 +1,48 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import type { BadgeType } from '../badges/types';
|
||||
import { Spinner } from './Spinner';
|
||||
import { getBadgeImageFileLocalPath } from '../badges/getBadgeImageFileLocalPath';
|
||||
import { BadgeImageTheme } from '../badges/BadgeImageTheme';
|
||||
|
||||
export function BadgeImage({
|
||||
badge,
|
||||
size,
|
||||
}: Readonly<{
|
||||
badge: BadgeType;
|
||||
size: number;
|
||||
}>): JSX.Element {
|
||||
const { name } = badge;
|
||||
|
||||
const imagePath = getBadgeImageFileLocalPath(
|
||||
badge,
|
||||
size,
|
||||
BadgeImageTheme.Transparent
|
||||
);
|
||||
|
||||
if (!imagePath) {
|
||||
return (
|
||||
<Spinner
|
||||
ariaLabel={name}
|
||||
moduleClassName="BadgeImage BadgeImage__loading"
|
||||
size={`${size}px`}
|
||||
svgSize="normal"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<img
|
||||
alt={name}
|
||||
className="BadgeImage"
|
||||
src={imagePath}
|
||||
style={{
|
||||
width: size,
|
||||
height: size,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue