More styling

src/pages/homepage/components/Search.tsx

@@ -10,12 +10,19 @@ export default function Search() {
 	const [providerURL, setProviderURL] = useState(
 		"https://www.google.com/search?q=",
 	);
+	const [value, setValue] = useState("");
 
 	const handleKeyPress = (item: any) => {
-		const option =
+		let option = ''
+		let subtext = ''
+		if (item.target.value.startsWith("/")) {
+			option =
 			item.target.value.substr(1, item.target.value.indexOf(" ") - 1) ||
 			item.target.value.substr(1);
-		const subtext = item.target.value.substr(2 + option.length);
+			subtext = item.target.value.substr(2 + option.length);
+		} else {
+			subtext = item.target.value;
+		}
 		if (item.key === "Enter") {
 			if (item.target.value.startsWith("/")) {
 				open(`${providerURL}${subtext}`, "_self");
@@ -63,25 +70,25 @@ export default function Search() {
 				classNames={textInputClasses}
 				spellCheck="true"
 				leftSection={providerLabel}
+				value={value}
+				data-active={value !== ''}
 				onChange={(item: any) => {
+					setValue(item.currentTarget.value)
 					if (item.target.value.startsWith("/")) {
-						setProviderLabel(
-							providers?.find(
-								(p: any) => p.prefix === item.target.value.split(" ")[0],
-							).name,
-						);
-						setProviderURL(
-							providers?.find(
-								(p: any) => p.prefix === item.target.value.split(" ")[0],
-							).url,
-						);
+						const provider = providers?.find(
+							(p: any) => p.prefix === item.target.value.split(" ")[0],
+						)
+						setProviderLabel(provider?.name || "Invalid Search");
+						setProviderURL(provider?.url);
 					} else {
 						setProviderLabel("Google Search");
 						setProviderURL("https://www.google.com/search?q=");
 					}
 				}}
 				onKeyUp={(item: any) => {
-					handleKeyPress(item);
+					if(providerLabel !== "Invalid Search"){
+						handleKeyPress(item);
+					}
 				}}
 			/>
 		</Stack>