diff --git a/tgui/packages/tgui/interfaces/VorePanel.js b/tgui/packages/tgui/interfaces/VorePanel.js index b1e4971287e..976c2e1429d 100644 --- a/tgui/packages/tgui/interfaces/VorePanel.js +++ b/tgui/packages/tgui/interfaces/VorePanel.js @@ -1,7 +1,7 @@ import { capitalize } from 'common/string'; import { Fragment } from 'inferno'; import { useBackend, useLocalState } from '../backend'; -import { Box, Button, Flex, Collapsible, Icon, LabeledList, NoticeBox, Section, Tabs } from '../components'; +import { Box, Button, Flex, Collapsible, Icon, LabeledList, NoticeBox, Section, Tabs, Divider } from '../components'; import { Window } from '../layouts'; import { classes } from 'common/react'; @@ -41,8 +41,17 @@ const digestModeToPreyMode = { */ export const VorePanel = (props, context) => { const { act, data } = useBackend(context); + + const [tabIndex, setTabIndex] = useLocalState(context, 'panelTabIndex', 0); + + const tabs = []; + + tabs[0] = ; + + tabs[1] = ; + return ( - + {(data.unsaved_changes && ( @@ -56,8 +65,17 @@ export const VorePanel = (props, context) => { )) || null} - - + + setTabIndex(0)}> + Bellies + + + setTabIndex(1)}> + Preferences + + + + {tabs[tabIndex] || 'Error'} ); @@ -111,26 +129,33 @@ const VoreBellySelectionAndCustomization = (props, context) => { const { our_bellies, selected } = data; return ( -
- - {our_bellies.map((belly) => ( - act('bellypick', { bellypick: belly.ref })}> - - {belly.name} ({belly.contents}) - - - ))} - act('newbelly')}> - New - - - - {selected && } -
+ + +
+ + act('newbelly')}> + New + + + + {our_bellies.map((belly) => ( + act('bellypick', { bellypick: belly.ref })}> + + {belly.name} ({belly.contents}) + + + ))} + +
+
+ +
{selected && }
+
+
); }; @@ -143,7 +168,7 @@ const VoreSelectedBelly = (props, context) => { const { belly } = props; const { contents } = belly; - const [tabIndex, setTabIndex] = useLocalState(context, 'tabIndex', 0); + const [tabIndex, setTabIndex] = useLocalState(context, 'bellyTabIndex', 0); const tabs = []; @@ -204,15 +229,15 @@ const VoreSelectedBellyControls = (props, context) => { buttons={