Spaces:
Paused
Paused
File size: 2,486 Bytes
054d282 cd33332 054d282 cd33332 054d282 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { AiOutlineSearch } from "react-icons/ai";
const PresearchPrompt = "Please extract search terms from the user’s question. The search terms is a concise sentence, which will be searched on Google to obtain relevant information to answer the user’s question, too generalized search terms doesn’t help. Please provide no more than two search terms. Please provide the most relevant search terms only, the search terms should directly correspond to the user’s question. Please separate different search items with commas, with no quote marks. The user’s question is:"
export default function HomeSearch() {
const router = useRouter();
const [input, setInput] = useState("");
const [randomSearchLoading, setRandomSearchLoading] = useState(false);
function handleSubmit(e) {
e.preventDefault();
if (!input.trim()) return;
router.push(`/search/web?searchTerm=${input}`);
}
async function randomSearch() {
setRandomSearchLoading(true);
//
const response = await fetch("https://random-word-api.herokuapp.com/word")
.then((res) => res.json())
if (!response) return;
router.push(`/search/web?searchTerm=${response}`);
setRandomSearchLoading(false);
}
return (
<>
<form
onSubmit={handleSubmit}
className="flex w-full mt-5 mx-auto max-w-[90%] border border-gray-200 px-5 py-3 rounded-full hover:shadow-md focus-within:shadow-md transition-shadow sm:max-w-xl lg:max-w-2xl"
>
<AiOutlineSearch className="text-xl text-gray-500 mr-3" />
<input
type="text"
className="flex-grow focus:outline-none"
onChange={(e) => setInput(e.target.value)}
value={input}
/>
</form>
<div className="flex flex-col space-y-2 sm:space-y-0 sm:space-x-4 justify-center sm:flex-row mt-8 ">
<button onClick={handleSubmit} className="btn">
Google Search
</button>
<button
disabled={randomSearchLoading}
onClick={randomSearch}
className="btn flex items-center justify-center disabled:opacity-80"
>
{randomSearchLoading ? (
<img
src="spinner.svg"
alt="loading..."
className="h-6 text-center"
/>
) : (
"I'm feeling lucky"
)}
</button>
</div>
</>
);
}
|