Added background Select

src/pages/settings/components/Themes.tsx

@@ -7,6 +7,7 @@ import {
 	Divider,
 	Group,
 	Modal,
+	Select,
 	Stack,
 	Text,
 	TextInput,
@@ -32,16 +33,27 @@ function ThemesSettings({ theme }: any) {
 	const { data, isFetched } = useQueryAPI({
 		endpoint: 'api/themes',
 	});
+	const { data: backgrounds, isFetched: isBackgroundFetched } = useQueryAPI({
+		endpoint: 'api/backgrounds',
+	})
 	const [themesList, setThemesList] = useState([]);
+	const [backgroundList, setBackgroundList] = useState<any>(["None"]);
 	const [selectedTheme, setSelectedTheme] = useState<any>({});
 	const { mutateAsync: createTheme } = useMutationAPI();
 	const { mutateAsync: deleteTheme } = useMutationAPI();
+
 	useEffect(() => {
 		if (isFetched) {
 			setThemesList(data);
 		}
 	}, [data, isFetched]);
 
+	useEffect(() => {
+		if (backgrounds && isBackgroundFetched) {
+			setBackgroundList(["None", ...backgrounds]);
+		}
+	}, [backgrounds, isBackgroundFetched]);
+
 	const handleOpen = (theme: any) => {
 		setSelectedTheme(theme);
 		open();
@@ -201,13 +213,14 @@ function ThemesSettings({ theme }: any) {
 									/>
 								</Group>
 								<Group c={'black'} justify='space-between'>
-									<TextInput
-										label='Background Image Path'
+									<Select
+										data={backgroundList}
+										label='Background Image'
 										value={selectedTheme.backgroundImage}
-										onChange={(e) =>
+										onChange={(value) =>
 											setSelectedTheme({
 												...selectedTheme,
-												backgroundImage: e.target.value,
+												backgroundImage: value,
 											})
 										}
 										styles={{