Search Provider icons

src/pages/homepage/components/Search/Search.tsx

@@ -81,6 +81,8 @@ export default function Search({
 		setProviderURL,
 		providerPrefix,
 		setProviderPrefix,
+		providerIcon,
+		setProviderIcon,
 		searchValue,
 		setSearchValue,
 		defaultProviderURL,
@@ -89,10 +91,13 @@ export default function Search({
 		setDefaultProviderLabel,
 		defaultProviderPrefix,
 		setDefaultProviderPrefix,
+		defaultProviderIcon,
+		setDefaultProviderIcon,
 	} = useCommonHooks();
 	const [placeholderValue, setPlaceholderValue] = useState<string>('');
 	const [value, setValue] = useState(0);
 	const [historyMultiplier, setHistoryMultiplier] = useState(1);
+	const Icon = allIcons[providerIcon];
 
 	const handleResetSearch = () => {
 		setSearchValue('');
@@ -259,6 +264,7 @@ export default function Search({
 			setProviderLabel('Google Search');
 			setProviderURL('https://www.google.com/search?q=');
 			setProviderPrefix('/g');
+			setProviderIcon('FaGoogle');
 		} else if (item.target.value.startsWith('/')) {
 			const provider = providers?.find(
 				(p: Provider) => p.prefix === item.target.value.split(' ')[0],
@@ -266,6 +272,7 @@ export default function Search({
 			setProviderLabel(provider?.name ?? 'Invalid Search');
 			setProviderURL(provider?.url ?? '');
 			setProviderPrefix(provider?.prefix ?? '');
+			setProviderIcon(provider?.icon ?? '');
 		} else if (item.target.value.startsWith('!')) {
 			if (item.target.value === '!w' || item.target.value === '!weather') {
 				setProviderLabel('Show weather');
@@ -283,6 +290,7 @@ export default function Search({
 			setProviderLabel(defaultProviderLabel);
 			setProviderURL(defaultProviderURL);
 			setProviderPrefix(defaultProviderPrefix);
+			setProviderIcon(defaultProviderIcon);
 		}
 	};
 
@@ -333,7 +341,12 @@ export default function Search({
 	};
 
 	const renderItem: any = (item: any) => {
-		const Icon = allIcons[item.option.icon];
+		const Icon =
+			allIcons[
+				(item.option.icon ?? item.option.prefix === '/g')
+					? 'FaGoogle'
+					: (providers.find((p: Provider) => p.prefix === item.option.prefix)?.icon ?? '')
+			];
 		return !searchValue.startsWith('!') ? (
 			item.option.value === 'load' ? (
 				<Group
@@ -363,6 +376,7 @@ export default function Search({
 					handleSearchHistoryItem={handleSearchHistoryItem}
 					searchEndpoint={searchEndpoint}
 					setSearchValue={setSearchValue}
+					Icon={Icon}
 				/>
 			)
 		) : (
@@ -470,6 +484,7 @@ export default function Search({
 			);
 			setDefaultProviderPrefix(defaultProviderData[0]?.prefix ?? '/g');
 			setDefaultProviderLabel(defaultProviderData[0]?.name ?? 'Google Search');
+			setDefaultProviderIcon(defaultProviderData[0]?.icon ?? 'FaGoogle');
 		}
 	}, [defaultProviderData, defaultProviderDataIsFetched]);
 
@@ -520,7 +535,18 @@ export default function Search({
 					spellCheck={true}
 					searchable
 					autoFocus={!isMobile}
-					leftSection={providerLabel}
+					leftSection={
+						providerIcon ? (
+							<Icon
+								style={{
+									height: 32,
+									width: 32,
+								}}
+							/>
+						) : (
+							providerLabel
+						)
+					}
 					rightSection={<div />}
 					clearable
 					onClear={handleResetSearch}

src/pages/homepage/components/Search/components/SearchSelectItem.tsx

@@ -9,6 +9,7 @@ function SearchSelectItem({
 	handleSearchHistoryItem,
 	searchEndpoint,
 	setSearchValue,
+	Icon,
 }: any) {
 	const { isMobile, theme } = useCommonHooks();
 	const { mutateAsync } = useMutationAPI();
@@ -22,7 +23,6 @@ function SearchSelectItem({
 	const dateString = isMobile
 		? `${month}/${day}/${year}`
 		: `${month}/${day}/${year} ${hours}:${minutes}`;
-
 	return (
 		<Group
 			w={'100%'}
@@ -39,24 +39,48 @@ function SearchSelectItem({
 				setShowFillButton(false);
 			}}
 		>
-			<Group m={0} p={0} w={'160px'}>
-				<Text
-					style={{
-						backgroundColor: `${theme.primaryColor}33`,
-						fontWeight: 600,
-						borderRadius: '15px',
-						padding: '.25rem',
-					}}
-				>
-					{item.option.provider}
-				</Text>
+			<Group
+				m={0}
+				p={0}
+				w={'120px'}
+				justify='center'
+				style={{
+					overflow: 'hidden',
+					whiteSpace: 'nowrap',
+				}}
+			>
+				{Icon ? (
+					<Icon
+						style={{
+							height: 32,
+							width: 32,
+							backgroundColor: `${theme.primaryColor}33`,
+							borderRadius: '15px',
+							padding: '.25rem',
+						}}
+					/>
+				) : (
+					<Text
+						style={{
+							backgroundColor: `${theme.primaryColor}33`,
+							fontWeight: 600,
+							borderRadius: '15px',
+							padding: '.25rem',
+							marginRight: '.25rem',
+							overflow: 'hidden',
+							textOverflow: 'ellipsis',
+						}}
+					>
+						{item.option.provider}
+					</Text>
+				)}
 			</Group>
 			<Group
 				m={0}
 				p={0}
 				gap={0}
 				justify='space-between'
-				w={'calc(100% - 160px)'}
+				w={'calc(100% - 120px)'}
 				style={{
 					whiteSpace: 'nowrap',
 					overflow: 'hidden',