|
|
|
@ -1,72 +1,68 @@
|
|
|
|
|
import { useState } from "react";
|
|
|
|
|
import { FiSearch } from "react-icons/fi";
|
|
|
|
|
import { FcGoogle } from "react-icons/fc";
|
|
|
|
|
import { SiDuckduckgo } from "react-icons/si";
|
|
|
|
|
import { SiMicrosoftbing } from "react-icons/si";
|
|
|
|
|
import { SiDuckduckgo, SiMicrosoftbing, SiGoogle } from "react-icons/si";
|
|
|
|
|
|
|
|
|
|
export default function Search({ options, classN }) {
|
|
|
|
|
const providers = ["google", "bing", "duckduckgo", "custom"];
|
|
|
|
|
const targets = ["_blank", "_parent", "_top"];
|
|
|
|
|
const providers = {
|
|
|
|
|
google: {
|
|
|
|
|
name: "Google",
|
|
|
|
|
url: "https://www.google.com/search?q=",
|
|
|
|
|
icon: SiGoogle,
|
|
|
|
|
},
|
|
|
|
|
duckduckgo: {
|
|
|
|
|
name: "DuckDuckGo",
|
|
|
|
|
url: "https://duckduckgo.com/?q=",
|
|
|
|
|
icon: SiDuckduckgo,
|
|
|
|
|
},
|
|
|
|
|
bing: {
|
|
|
|
|
name: "Bing",
|
|
|
|
|
url: "https://www.bing.com/search?q=",
|
|
|
|
|
icon: SiMicrosoftbing,
|
|
|
|
|
},
|
|
|
|
|
custom: {
|
|
|
|
|
name: "Custom",
|
|
|
|
|
url: false,
|
|
|
|
|
icon: FiSearch,
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default function Search({ options }) {
|
|
|
|
|
const provider = providers[options.provider];
|
|
|
|
|
const [query, setQuery] = useState("");
|
|
|
|
|
|
|
|
|
|
function search() {
|
|
|
|
|
if (!providers.includes(options.provider)) {
|
|
|
|
|
return;
|
|
|
|
|
if (!provider) {
|
|
|
|
|
return <></>;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handleSubmit(event) {
|
|
|
|
|
const q = encodeURIComponent(query);
|
|
|
|
|
|
|
|
|
|
if (provider.url) {
|
|
|
|
|
window.open(`${provider.url}${q}`, options.target || "_blank");
|
|
|
|
|
} else {
|
|
|
|
|
if (options.provider === "custom") {
|
|
|
|
|
if (targets.includes(options.target)) {
|
|
|
|
|
window.open(options.customdata.url + query, options.target);
|
|
|
|
|
} else window.open(options.customdata.url + query, "_self");
|
|
|
|
|
} else {
|
|
|
|
|
if (targets.includes(options.target)) {
|
|
|
|
|
window.open(`https://www.${options.provider}.com/search?q=` + query, `${options.target}`);
|
|
|
|
|
} else window.open(`https://www.${options.provider}.com/search?q=` + query, "_self");
|
|
|
|
|
}
|
|
|
|
|
window.open(`${options.url}${q}`, options.target || "_blank");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
event.target.reset();
|
|
|
|
|
setQuery("");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!options || (options.provider === "custom" && !options.customdata)) {
|
|
|
|
|
return <></>;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<form className={`grow flex-col relative h-8 my-4 md:my-0 min-w-full md:min-w-fit ${classN}`}>
|
|
|
|
|
<div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-theme-200">
|
|
|
|
|
{options.provider == "google" ? (
|
|
|
|
|
<FcGoogle className="text-theme-800 dark:text-theme-200 w-3 h-3" />
|
|
|
|
|
) : options.provider == "duckduckgo" ? (
|
|
|
|
|
<SiDuckduckgo className="text-theme-800 dark:text-theme-200 w-3 h-3" />
|
|
|
|
|
) : options.provider == "bing" ? (
|
|
|
|
|
<SiMicrosoftbing className="text-theme-800 dark:text-theme-200 w-3 h-3" />
|
|
|
|
|
) : options.provider == "custom" ? (
|
|
|
|
|
options.customdata.abbr.length > 2 ? (
|
|
|
|
|
options.customdata.abbr.substring(0, 2)
|
|
|
|
|
) : (
|
|
|
|
|
options.customdata.abbr
|
|
|
|
|
)
|
|
|
|
|
) : (
|
|
|
|
|
""
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
<form className="flex-col relative h-8 my-4 min-w-full md:min-w-fit grow" onSubmit={handleSubmit}>
|
|
|
|
|
<div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-theme-200"></div>
|
|
|
|
|
<input
|
|
|
|
|
type="search"
|
|
|
|
|
autoFocus
|
|
|
|
|
className={`block ${
|
|
|
|
|
options.customdata && options.customdata.abbr && options.customdata.abbr.length > 1 ? "pl-12" : "pl-10"
|
|
|
|
|
} w-full text-sm text-gray-900 bg-gray-50 rounded-full border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 h-full`}
|
|
|
|
|
className={`overflow-hidden w-full placeholder-theme-900 text-xs text-theme-900 bg-theme-50 rounded-md border border-theme-300 focus:ring-theme-500 focus:border-theme-500 dark:bg-theme-800 dark:border-theme-600 dark:placeholder-theme-400 dark:text-white dark:focus:ring-theme-500 dark:focus:border-theme-500 h-full`}
|
|
|
|
|
placeholder="Search..."
|
|
|
|
|
onChange={(s) => setQuery(s.currentTarget.value)}
|
|
|
|
|
required
|
|
|
|
|
/>
|
|
|
|
|
<button
|
|
|
|
|
type="submit"
|
|
|
|
|
onClick={search}
|
|
|
|
|
className="text-white absolute right-0.5 bottom-0.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-r-full text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
|
|
|
|
className="text-white absolute right-0.5 bottom-0.5 bg-theme-700 hover:bg-theme-800 border-1 focus:ring-2 focus:ring-theme-300 font-medium rounded-r-md text-sm px-4 py-2 dark:bg-theme-600 dark:hover:bg-theme-700 dark:focus:ring-theme-500"
|
|
|
|
|
>
|
|
|
|
|
<FiSearch className="text-theme-200 dark:text-theme-200 w-3 h-3" />
|
|
|
|
|
<provider.icon className="text-theme-800 dark:text-theme-200 w-3 h-3" />
|
|
|
|
|
</button>
|
|
|
|
|
</form>
|
|
|
|
|
);
|
|
|
|
|