diff --git a/src/assets/images/infostand/rarity-level.png b/src/assets/images/infostand/rarity-level.png new file mode 100644 index 00000000..eb1278ef Binary files /dev/null and b/src/assets/images/infostand/rarity-level.png differ diff --git a/src/views/shared/Shared.scss b/src/views/shared/Shared.scss index 6d25a8f2..3fcc657f 100644 --- a/src/views/shared/Shared.scss +++ b/src/views/shared/Shared.scss @@ -1,7 +1,8 @@ @import './avatar-image/AvatarImage'; @import './badge-image/BadgeImage'; -@import './currency-icon/CurrencyIcon.scss'; +@import './currency-icon/CurrencyIcon'; @import './furni-image/FurniImageView'; @import './limited-edition/LimitedEdition'; @import './pet-image/PetImage'; +@import './rarity-level/RarityLevelView'; @import './room-previewer/RoomPreviewerView'; diff --git a/src/views/shared/rarity-level/RarityLevelView.scss b/src/views/shared/rarity-level/RarityLevelView.scss new file mode 100644 index 00000000..adf4624f --- /dev/null +++ b/src/views/shared/rarity-level/RarityLevelView.scss @@ -0,0 +1,12 @@ +.nitro-rarity-level { + width: 36px; + height: 28px; + background: url("../../../assets/images/infostand/rarity-level.png"); + + div { + line-height: 28px; + text-align: center; + color: $black; + font-weight: bold; + } +} diff --git a/src/views/shared/rarity-level/RarityLevelView.tsx b/src/views/shared/rarity-level/RarityLevelView.tsx new file mode 100644 index 00000000..50b3cdc3 --- /dev/null +++ b/src/views/shared/rarity-level/RarityLevelView.tsx @@ -0,0 +1,13 @@ +import { FC } from 'react'; +import { RarityLevelViewProps } from './RarityLevelView.types'; + +export const RarityLevelView: FC = props => +{ + const { level = 0 } = props; + + return ( +
+
{ level }
+
+ ); +} diff --git a/src/views/shared/rarity-level/RarityLevelView.types.ts b/src/views/shared/rarity-level/RarityLevelView.types.ts new file mode 100644 index 00000000..e0bc2d80 --- /dev/null +++ b/src/views/shared/rarity-level/RarityLevelView.types.ts @@ -0,0 +1,4 @@ +export interface RarityLevelViewProps +{ + level: number; +}