63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
// Metro module 11954 (f11955).
|
|
import { useMemo } from "react";
|
|
import { View } from "react-native";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import AvatarUtils from "../../../../utils/AvatarUtils";
|
|
import EmojiUtils from "../../../../utils/EmojiUtils";
|
|
import Emoji from "../../../emojis/native/Emoji";
|
|
import { Text } from "../../../../design/components/Text/native/Text";
|
|
let useStyles, GuildProfileTraitView;
|
|
const TraitEmoji = function TraitEmoji(props) {
|
|
const emoji = props.emoji;
|
|
const styles = useStyles();
|
|
if (emoji == null) {
|
|
return null;
|
|
}
|
|
return <Emoji src={emoji.id != null ? AvatarUtils.getEmojiURL({
|
|
id: emoji.id,
|
|
animated: emoji.animated,
|
|
size: 16
|
|
}) : void 0} name={EmojiUtils.isCustomEmoji(emoji) ? emoji.name : emoji.surrogates} fastImageStyle={styles.emojiImage} />;
|
|
};
|
|
GuildProfileTraitView = function GuildProfileTraitView(props) {
|
|
const trait = props.trait;
|
|
return <View style={useStyles().trait}>
|
|
<TraitEmoji emoji={trait.emoji} />
|
|
<Text variant="text-sm/medium" color="text-default">{trait.label}</Text>
|
|
</View>;
|
|
};
|
|
useStyles = createStyles({
|
|
container: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
flexWrap: "wrap",
|
|
gap: 8
|
|
},
|
|
trait: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
gap: 4,
|
|
alignItems: "center",
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 4,
|
|
borderRadius: Module712.radii.lg,
|
|
borderWidth: 1,
|
|
borderStyle: "solid",
|
|
borderColor: Module712.colors.BORDER_SUBTLE
|
|
},
|
|
emojiImage: {
|
|
width: 16,
|
|
height: 16
|
|
}
|
|
});
|
|
export default function GuildProfileTraits(props) {
|
|
const profile = props.profile;
|
|
return <View style={useStyles().container}>
|
|
{useMemo(() => profile.traits.map((trait, index) => ({
|
|
key: `trait-${index}`,
|
|
...trait
|
|
})).filter((item) => item.label.length > 0), [profile]).map((item) => <GuildProfileTraitView key={item.key} trait={item} />)}
|
|
</View>;
|
|
};
|