Inventory tabs selector

src/views/inventory/InventoryView.tsx

@@ -1,14 +1,23 @@
-import { FC, useCallback, useState } from 'react';
+import React, { FC, useCallback, useEffect, useState } from 'react';
 import { InventoryEvent } from '../../events';
 import { DraggableWindow } from '../../hooks/draggable-window/DraggableWindow';
 import { useUiEvent } from '../../hooks/events/ui/ui-event';
 import { LocalizeText } from '../../utils/LocalizeText';
 import { InventoryMessageHandler } from './InventoryMessageHandler';
-import { InventoryViewProps } from './InventoryView.types';
+import { IInventoryContext, InventoryViewProps } from './InventoryView.types';
+import { InventoryTabsView } from './tabs/InventoryTabsView';
+
+export const InventoryContext = React.createContext<IInventoryContext>(null);
 
 export const InventoryView: FC<InventoryViewProps> = props =>
 {
     const [ isVisible, setIsVisible ]   = useState(false);
+    const [ currentTab, setCurrentTab ] = useState<string>(null);
+    const [ tabs, setTabs ]             = useState<string[]>([ 'inventory.furni', 'inventory.bots', 'inventory.furni.tab.pets', 'inventory.badges' ]);
+
+    useEffect(() => {
+        setCurrentTab(tabs[0]);
+    }, [ tabs ]);
 
     const onInventoryEvent = useCallback((event: InventoryEvent) =>
     {
@@ -32,7 +41,7 @@ export const InventoryView: FC<InventoryViewProps> = props =>
     }
 
     return (
-        <>
+        <InventoryContext.Provider value={{ currentTab: currentTab, onSetCurrentTab: setCurrentTab }}>
             <InventoryMessageHandler  />
             { isVisible && <DraggableWindow handle=".drag-handler">
                 <div className="nitro-inventory d-flex flex-column bg-primary border border-black shadow rounded">
@@ -42,11 +51,9 @@ export const InventoryView: FC<InventoryViewProps> = props =>
                             <i className="fas fa-times"></i>
                         </button>
                     </div>
-                    <div className="d-flex p-3">
-                        content
-                    </div>
+                    <InventoryTabsView tabs={ tabs } />
                 </div>
             </DraggableWindow> }
-        </>
+        </InventoryContext.Provider>
     );
 }

src/views/inventory/InventoryView.types.ts

@@ -1,4 +1,8 @@
 export interface InventoryViewProps
-{
+{}
 
+export interface IInventoryContext
+{
+    currentTab: string;
+    onSetCurrentTab: (tab: string) => void;
 }

src/views/inventory/tabs/InventoryTabsView.tsx

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { InventoryTabsViewProps } from './InventoryTabsView.types';
+import { InventoryTabView } from './tab/InventoryTabView';
+
+export const InventoryTabsView: FC<InventoryTabsViewProps> = props =>
+{
+    return (
+        <div className="p-3">
+            { props.tabs &&
+                <div className="btn-group w-100">
+                    { props.tabs.map((tab, index) =>
+                        {
+                            return <InventoryTabView key={ index } tab={ tab } />
+                        }) }
+                </div> }
+        </div>
+    );
+}

src/views/inventory/tabs/InventoryTabsView.types.ts

@@ -0,0 +1,4 @@
+export interface InventoryTabsViewProps
+{
+    tabs: string[];
+}

src/views/inventory/tabs/tab/InventoryTabView.tsx

@@ -0,0 +1,18 @@
+import classNames from 'classnames';
+import { FC, useContext } from 'react';
+import { LocalizeText } from '../../../../utils/LocalizeText';
+import { InventoryContext } from '../../InventoryView';
+import { InventoryTabViewProps } from './InventoryTabView.types';
+
+export const InventoryTabView: FC<InventoryTabViewProps> = props =>
+{
+    const inventoryContext = useContext(InventoryContext);
+
+    return (
+        <button type="button" 
+        className={ 'btn btn-secondary btn-sm ' + classNames({ 'active': inventoryContext.currentTab === props.tab })}
+        onClick={ () => inventoryContext.onSetCurrentTab(props.tab) }>
+            { LocalizeText(props.tab) }
+        </button>
+    );
+}

src/views/inventory/tabs/tab/InventoryTabView.types.ts

@@ -0,0 +1,4 @@
+export interface InventoryTabViewProps
+{
+    tab: string;
+}

src/views/navigator/tabs/NavigatorTabsView.tsx

@@ -6,7 +6,7 @@ export function NavigatorTabsView(props: NavigatorTabsViewProps): JSX.Element
     const { topLevelContext = null, topLevelContexts = null, setTopLevelContext = null } = props;
 
     return (
-        <div className="d-flex flex-column p-3">
+        <div className="p-3">
             { topLevelContexts && topLevelContexts.length && 
                 <div className="btn-group w-100">
                     { topLevelContexts.map((context, index) =>