Spaces:
Paused
Paused
File size: 2,025 Bytes
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 |
"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { AiOutlineSearch } from "react-icons/ai";
import { BsFillMicFill } from "react-icons/bs";
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())
.then((data) => data[0]);
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>
</>
);
}
|