Add RoomThumbnailView

src/layout/Layout.scss

@@ -29,5 +29,6 @@
 @import './mini-camera/NitroLayoutMiniCameraView';
 @import './notification-alert/NotificationAlertView';
 @import './notification-bubble/NotificationBubbleView';
+@import './room-thumbnail/RoomThumbnailView';
 @import './trophy/NitroLayoutTrophyView';
 @import './gift-card/NitroLayoutGiftCardView';

src/layout/room-thumbnail/RoomThumbnailView.scss

@@ -0,0 +1,7 @@
+.room-thumbnail {
+    position: relative;
+    width: 110px;
+    height: 110px;
+    background: url("../../assets/images/navigator/thumbnail_placeholder.png") no-repeat center;
+    background-color: rgba($black, .125);
+}

src/layout/room-thumbnail/RoomThumbnailView.tsx

@@ -0,0 +1,37 @@
+import { FC, useMemo } from 'react';
+import { GetConfiguration } from '../../api';
+import { Base, BaseProps } from '../../common/Base';
+
+export interface RoomThumbnailViewProps extends BaseProps<HTMLDivElement>
+{
+    roomId?: number;
+    customUrl?: string;
+}
+
+export const RoomThumbnailView: FC<RoomThumbnailViewProps> = props =>
+{
+    const { roomId = -1, customUrl = null, shrink = true, overflow = 'hidden', classNames = [], children = null, ...rest } = props;
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'room-thumbnail', 'rounded', 'border' ];
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ classNames ]);
+
+    const getImageUrl = useMemo(() =>
+    {
+        if(customUrl && customUrl.length) return (GetConfiguration<string>('image.library.url') + customUrl);
+
+        return (GetConfiguration<string>('thumbnails.url').replace('%thumbnail%', roomId.toString()));
+    }, [ customUrl, roomId ]);
+
+    return (
+        <Base shrink={ shrink } overflow={ overflow } classNames={ getClassNames } { ...rest }>
+            { getImageUrl && <img alt="" src={ getImageUrl } /> }
+            { children }
+        </Base>
+    );
+}