Add LayoutProgressBar

src/common/layout/LayoutProgressBar.tsx

@@ -0,0 +1,31 @@
+import { FC, useMemo } from 'react';
+import { Base, BaseProps, Flex } from '..';
+
+interface LayoutProgressBarProps extends BaseProps<HTMLDivElement>
+{
+    text: string;
+    progress: number;
+    maxProgress?: number;
+}
+
+export const LayoutProgressBar: FC<LayoutProgressBarProps> = props =>
+{
+    const { text = '', progress = 0, maxProgress = 0, position = 'relative', classNames = [], children = null, ...rest } = props;
+
+    const getClassNames = useMemo(() =>
+    {
+        const newClassNames: string[] = [ 'progress', 'text-black' ];
+
+        if(classNames.length) newClassNames.push(...classNames);
+
+        return newClassNames;
+    }, [ classNames ]);
+
+    return (
+        <Base position={ position } classNames={ getClassNames } { ...rest }>
+            <Flex fit center position="absolute">{ text }</Flex>
+            <Base className="progress-bar bg-success" style={ { width: (~~((((progress - 0) * (100 - 0)) / (maxProgress - 0)) + 0) + '%') }} />
+            { children }
+        </Base>
+    );
+}

src/common/layout/index.ts

@@ -11,6 +11,7 @@ export * from './LayoutMiniCameraView';
 export * from './LayoutNotificationAlertView';
 export * from './LayoutNotificationBubbleView';
 export * from './LayoutPetImageView';
+export * from './LayoutProgressBar';
 export * from './LayoutRarityLevelView';
 export * from './LayoutRoomPreviewerView';
 export * from './LayoutRoomThumbnailView';