Added background Select

src/App.tsx

@@ -10,6 +10,7 @@ import { ModalsProvider } from '@mantine/modals';
 import { useQueryAPI } from 'hooks';
 import { useEffect } from 'react';
 import {
+	Navigate,
 	Route,
 	RouterProvider,
 	createBrowserRouter,
@@ -56,6 +57,7 @@ function App() {
 	const router = createBrowserRouter(
 		createRoutesFromElements(
 			<Route>
+				<Route path='/' element={<Navigate to={`/${import.meta.env.VITE_BASE_URL}`} />} />
 				<Route
 					path={`/${import.meta.env.VITE_BASE_URL}`}
 					element={<Homepage theme={theme} />}

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
+									<Select
-										label='Background Image Path'
+										data={backgroundList}
+										label='Background Image'
 										value={selectedTheme.backgroundImage}
-										onChange={(e) =>
+										onChange={(value) =>
 											setSelectedTheme({
 												...selectedTheme,
-												backgroundImage: e.target.value,
+												backgroundImage: value,
 											})
 										}
 										styles={{