blob: 5f5d89e17e38ad6be298b65d9d1322b0ac115ae5 (
plain) (
blame)
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
|
"use client";
import React from "react";
import { useState } from "react";
import { Input, Progress } from "@nextui-org/react";
import { SearchedDramaData } from "./requests";
import SearchedDataFormatter from "./searchFormatter";
import { PreFetchKdramaInfo } from "./cacher";
export const Searchbar = () => {
const [loading, setLoading] = useState(<></>);
const [searchData, setSearchData] = useState(null);
const [searchTitle, setSearchTitle] = useState("");
async function handleSearchInput() {
setSearchData(null);
setLoading(
<Progress
size="sm"
isIndeterminate
aria-label="Loading..."
className="w-full"
/>
);
const data = await SearchedDramaData(searchTitle);
PreFetchKdramaInfo(data);
const format = await SearchedDataFormatter(data);
setSearchData(format);
setLoading(<></>);
}
return (
<div>
<div className="flex w-full flex-wrap flex-col mt-2 md:flex-nowrap md:mx-2 gap-4 lg:w-1/2 lg:mx-2">
<Input
type="text"
label="Search for k-dramas here"
placeholder="Enter k-drama title"
color="default"
onChange={(event) => {
if (event.target.value.trim() !== "") {
setSearchTitle(event.target.value);
}
}}
onKeyDown={async (event) => {
if (event.key === "Enter" || event.code === "Enter") {
await handleSearchInput();
}
}}
/>
{loading}
</div>
<div className="w-full mt-2">{searchData}</div>
</div>
);
};
|