Search Provider icons

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

@@ -1,17 +1,29 @@
-import { Box, Card, Group, Stack, Text, TextInput } from '@mantine/core';
+import {
+	Box,
+	Card,
+	type ComboboxItem,
+	type ComboboxLikeRenderOptionInput,
+	Group,
+	Select,
+	Stack,
+	Text,
+	TextInput,
+} from '@mantine/core';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { DeleteItemModal, ManagementPill } from 'components';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { cardClasses, textClasses, textInputClasses } from 'styles';
+import { cardClasses, selectClasses, textClasses, textInputClasses } from 'styles';
 import type { Provider } from 'types';
 
 function DebouncedSearchProvider({
 	searchProvider,
 	setIsOpen,
+	allIcons,
 }: {
 	searchProvider: Provider;
 	setIsOpen: (isOpen: boolean) => void;
+	allIcons: any;
 }) {
 	const { handleDelete, isMobile, theme } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
@@ -81,7 +93,7 @@ function DebouncedSearchProvider({
 			</Box>
 
 			<Stack w={'100%'} align='center'>
-				<Group w={'100%'} justify='center'>
+				<Group w={'100%'} justify='center' pos={'relative'}>
 					<TextInput
 						label={'Name'}
 						className={textInputClasses.settingsItem}
@@ -100,6 +112,7 @@ function DebouncedSearchProvider({
 									}
 								: undefined
 						}
+						w={'30%'}
 					/>
 					<TextInput
 						label={'Prefix'}
@@ -119,11 +132,63 @@ function DebouncedSearchProvider({
 									}
 								: undefined
 						}
+						w={'30%'}
+					/>
+					<Select
+						label={'Icon'}
+						className={selectClasses.settingsItem}
+						classNames={{
+							wrapper: selectClasses.menuSelectWrapper,
+							input: selectClasses.menuSelectInput,
+							label: selectClasses.menuSelectLabel,
+							options: selectClasses.menuSelectOptions,
+							option: selectClasses.menuSelectOption,
+							dropdown: selectClasses.dropdown,
+						}}
+						w={'30%'}
+						mt={'.75rem'}
+						limit={100}
+						placeholder='Search for an icon...'
+						defaultSearchValue={provider?.icon ?? ''}
+						defaultValue={provider?.icon}
+						data={Object.keys(allIcons).map((icon) => {
+							return { value: icon, label: icon };
+						})}
+						comboboxProps={{
+							zIndex: 3000,
+						}}
+						styles={
+							theme.textShadowsEnabled
+								? {
+										label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+									}
+								: undefined
+						}
+						onChange={(value: string | null) => {
+							setUpdate({
+								...provider,
+								icon: value,
+							});
+						}}
+						renderOption={(item: ComboboxLikeRenderOptionInput<ComboboxItem>) => {
+							const Icon = allIcons[item.option.value];
+							return (
+								<Group>
+									{item.option.value}
+									<Icon />
+								</Group>
+							);
+						}}
+						searchable
+						clearable
+						maxDropdownHeight={175}
+						onDropdownOpen={() => setIsOpen(true)}
+						onDropdownClose={() => setIsOpen(false)}
 					/>
 				</Group>
 				<TextInput
 					label={'Url'}
-					w={isMobile ? '80%' : '100%'}
+					w={isMobile ? '80%' : '94%'}
 					className={textInputClasses.settingsItem}
 					classNames={textInputClasses}
 					defaultValue={provider.url}