feat(web): Settings modal, locale state provider

web/src/features/settings/components/locale.tsx

@@ -0,0 +1,38 @@
+import { HStack, Text, Select, Spacer } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import { useNuiEvent } from "../../../hooks/useNuiEvent";
+import { useLocales } from "../../../providers/LocaleProvider";
+import { fetchNui } from "../../../utils/fetchNui";
+
+const LocaleSetting: React.FC<{
+  languages: string[];
+  selectValue: string;
+  setSelectValue: React.Dispatch<React.SetStateAction<string>>;
+}> = (props) => {
+  const { locale } = useLocales();
+
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    props.setSelectValue(e.target.value);
+    fetchNui("getLocale", e.target.value);
+  };
+
+  return (
+    <HStack spacing={5}>
+      <Text>{locale.ui.settings.language}</Text>
+      <Spacer />
+      <Select
+        onChange={(e) => handleChange(e)}
+        value={props.selectValue}
+        w={150}
+      >
+        {props.languages.map((language) => (
+          <option key={language} value={language}>
+            {language}
+          </option>
+        ))}
+      </Select>
+    </HStack>
+  );
+};
+
+export default LocaleSetting;

web/src/features/settings/index.tsx

@@ -0,0 +1,74 @@
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  useDisclosure,
+} from "@chakra-ui/react";
+import LocaleSetting from "./components/locale";
+import { useEffect, useState } from "react";
+import { useNuiEvent } from "../../hooks/useNuiEvent";
+import { debugData } from "../../utils/debugData";
+import { fetchNui } from "../../utils/fetchNui";
+import { useLocales } from "../../providers/LocaleProvider";
+
+debugData([
+  {
+    action: "openSettings",
+    data: true,
+  },
+]);
+
+const Settings: React.FC = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { locale } = useLocales();
+  const [languages, setLanguages] = useState([""]);
+  const [selectValue, setSelectValue] = useState("");
+
+  const closeSettings = () => {
+    onClose();
+    fetchNui("closeSettings");
+  };
+
+  useNuiEvent("loadLocales", (data) => setLanguages(data));
+  useNuiEvent("openSettings", (data: string) => {
+    onOpen();
+    setSelectValue(data);
+  });
+
+  return (
+    <>
+      <Modal
+        isOpen={isOpen}
+        onClose={onClose}
+        isCentered
+        closeOnEsc
+        closeOnOverlayClick={false}
+        size="xs"
+      >
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>{locale.ui.settings.title}</ModalHeader>
+          <ModalBody>
+            <LocaleSetting
+              languages={languages}
+              selectValue={selectValue}
+              setSelectValue={setSelectValue}
+            />
+          </ModalBody>
+          <ModalFooter>
+            <Button colorScheme="blue" onClick={closeSettings}>
+              {locale.ui.close}
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default Settings;