New settings pages

src/pages/settings/components/Search/SearchProviders.tsx

@@ -0,0 +1,41 @@
+import { Stack, Text } from '@mantine/core';
+import { DataTable, SearchProviderColumns } from 'components';
+import { useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
+import { textClasses } from 'styles';
+
+const SearchProviderSettings = () => {
+	const endpoint = 'api/providers';
+	const {
+		data: providers,
+		isFetched: providersIsFetched,
+		isFetching: providersIsFetching,
+		isLoading: providersIsLoading,
+	} = useQueryAPI({
+		endpoint: endpoint,
+	});
+	const [providerData, setProviderData] = useState<any>([]);
+
+	useEffect(() => {
+		if (providers && providersIsFetched) {
+			setProviderData(providers);
+		}
+	}, [providers, providersIsFetched]);
+
+	return (
+		<Stack>
+			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+				Search Providers
+			</Text>
+			<DataTable
+				tableName='Categories'
+				columns={SearchProviderColumns()}
+				tableData={providerData}
+				isFetching={providersIsFetching}
+				isLoading={providersIsLoading}
+				endpoint={endpoint}
+			/>
+		</Stack>
+	);
+};
+export default SearchProviderSettings;