diff --git a/web/src/features/dialog/InputDialog.tsx b/web/src/features/dialog/InputDialog.tsx index 2c54ec3..add0bc8 100644 --- a/web/src/features/dialog/InputDialog.tsx +++ b/web/src/features/dialog/InputDialog.tsx @@ -10,6 +10,7 @@ import { Text, Button, Checkbox, + Select, } from "@chakra-ui/react"; import React from "react"; import { useNuiEvent } from "../../hooks/useNuiEvent"; @@ -17,11 +18,14 @@ import { useLocales } from "../../providers/LocaleProvider"; import { debugData } from "../../utils/debugData"; import { fetchNui } from "../../utils/fetchNui"; +type RowType = "input" | "checkbox" | "select"; + interface Props { heading: string; rows: { - type: "input" | "checkbox"; + type: RowType; label: string; + options?: { value: string; label: string }[]; }[]; } @@ -35,6 +39,15 @@ debugData([ { type: "checkbox", label: "Some checkbox" }, { type: "input", label: "Locker PIN" }, { type: "checkbox", label: "Some other checkbox" }, + { + type: "select", + label: "Locker type", + options: [ + { value: "option1", label: "Option 1" }, + { value: "option2", label: "Option 2" }, + { value: "option3", label: "Option 3" }, + ], + }, ], }, }, @@ -60,14 +73,9 @@ const InputDialog: React.FC = () => { fetchNui("inputData"); }; - const handleChange = ( - e: React.ChangeEvent, - index: number, - type: "input" | "checkbox" - ) => { + const handleChange = (value: string | boolean, index: number) => { setInputData((previousData) => { - previousData[index] = - type === "input" ? e.target.value : e.target.checked; + previousData[index] = value; return previousData; }); }; @@ -96,18 +104,37 @@ const InputDialog: React.FC = () => { {row.type === "input" && ( {row.label} - handleChange(e, index, "input")} /> + handleChange(e.target.value, index)} + /> )} {row.type === "checkbox" && ( handleChange(e, index, "checkbox")} + onChange={(e) => handleChange(e.target.checked, index)} > {row.label} )} + {row.type === "select" && ( + + + + )} ))}