Makes the selection dropdown work

tgui/packages/tgui/interfaces/PreferencesMenu/CharacterPreferenceWindow.tsx

@@ -1,6 +1,6 @@
 import { exhaustiveCheck } from "common/exhaustive";
 import { useBackend, useLocalState } from "../../backend";
-import { Button, Stack } from "../../components";
+import { Stack, Dropdown, Flex } from "../../components";
 import { Window } from "../../layouts";
 import { PreferencesMenuData } from "./data";
 import { PageButton } from "./PageButton";
@@ -19,25 +19,29 @@ enum Page {
 }
 
 const CharacterProfiles = (props: {
-  activeSlot: number,
-  onClick: (index: number) => void,
-  profiles: (string | null)[],
+  activeSlot: number;
+  onClick: (index: number) => void;
+  profiles: (string | null)[];
 }) => {
-  const { profiles } = props;
+  const { profiles, activeSlot, onClick } = props;
 
   return (
-    <Stack justify="center" wrap>
-      {profiles.map((profile, slot) => (
-        <Stack.Item key={slot}>
-          <Button
-            selected={slot === props.activeSlot}
-            onClick={() => {
-              props.onClick(slot);
-            }} fluid>{profile ?? "New Character"}
-          </Button>
-        </Stack.Item>
-      ))}
-    </Stack>
+    <Flex align="center" justify="center">
+      <Flex.Item width="25%">
+        <Dropdown
+          width="100%"
+          selected={activeSlot}
+          displayText={profiles[activeSlot]}
+          options={profiles.map((profile, slot) => ({
+            value: slot,
+            displayText: profile ?? 'New Character',
+          }))}
+          onSelected={(slot) => {
+            onClick(slot);
+          }}
+        />
+      </Flex.Item>
+    </Flex>
   );
 };