Add BadgeImageView

src/views/Styles.scss

@@ -1,4 +1,5 @@
 @import './avatar-image/AvatarImage';
+@import './badge-image/BadgeImage';
 @import './catalog/CatalogView';
 @import './hotel-view/HotelView';
 @import './inventory/InventoryView';

src/views/badge-image/BadgeImage.scss

@@ -0,0 +1,7 @@
+.badge-image {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-position-x: center;
+}

src/views/badge-image/BadgeImageView.tsx

@@ -0,0 +1,24 @@
+import { Nitro } from 'nitro-renderer';
+import { FC } from 'react';
+import { BadgeImageViewProps } from './BadgeImageView.types';
+
+export const BadgeImageView: FC<BadgeImageViewProps> = props =>
+{
+    const { badgeCode = null, isGroup = false } = props;
+
+    function getBadgeUrl(): string
+    {
+        if(isGroup)
+        {
+            return ((Nitro.instance.getConfiguration<string>('badge.asset.group.url')).replace('%badgedata%', badgeCode));
+        }
+        else
+        {
+            return ((Nitro.instance.getConfiguration<string>('badge.asset.url')).replace('%badgename%', badgeCode));
+        }
+    }
+
+    const url = `url('${ getBadgeUrl() }')`;
+
+    return <div className="badge-image" style={ (url && url.length) ? { backgroundImage: url } : {} }></div>;
+}

src/views/badge-image/BadgeImageView.types.ts

@@ -0,0 +1,5 @@
+export interface BadgeImageViewProps
+{
+    badgeCode: string;
+    isGroup?: boolean;
+}