[upgrade] Abstract components on the page into subcomponents

components/search-page/SearchInput.tsx

@@ -0,0 +1,43 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { isEmptyString } from "@/lib/utils";
+import { type ChangeEvent, type KeyboardEvent, useEffect, useState } from "react";
+
+export const SearchInput = (props: {
+  handleSearch: (word: string) => any;
+  isLoading: boolean;
+  word?: string | null;
+}) => {
+  const [searchText, setSearchText] = useState<string>(props.word ?? "");
+
+  useEffect(() => {
+    if (!isEmptyString(searchText)) {
+      props.handleSearch(searchText);
+    }
+  }, []);
+
+  const handleInputSearchText = (event: ChangeEvent<HTMLInputElement>) => {
+    setSearchText(event.target.value);
+  };
+
+  const handleEnterKeySearch = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Go" || event.key === "Enter") {
+      props.handleSearch(searchText);
+    }
+  };
+
+  return (
+    <div className="my-10 flex">
+      <Input
+        className="my-auto py-0"
+        onChange={handleInputSearchText}
+        onKeyDown={handleEnterKeySearch}
+        placeholder="Input the keyword"
+        value={searchText}
+      />
+      <Button className="mx-3 my-auto w-32" disabled={props.isLoading} onClick={() => props.handleSearch(searchText)}>
+        {props.isLoading ? "Loading" : "Search"}
+      </Button>
+    </div>
+  );
+};

components/search-page/SearchResultList.tsx

@@ -0,0 +1,41 @@
+import type { TSearchResultItem } from "@/types/docs.type";
+import { nanoid } from "nanoid";
+import Link from "next/link";
+
+export const SearchResultList = (props: {
+  searchResult: TSearchResultItem[];
+}) => {
+  return (
+    <div>
+      <div className="flex flex-col justify-center">
+        <div className={"flex min-h-full flex-col content-font"}>
+          {props.searchResult.map((item, index) => (
+            <Link
+              className={`border-t p-2 ${
+                index === props.searchResult.length - 1 && "border-b"
+              } flex flex-col hover:bg-gray-50 dark:hover:bg-gray-900`}
+              href={`/blog/${item.id}`}
+              key={nanoid()}
+              target="_blank"
+            >
+              <div className="my-1">
+                <div className="post-list-caption-font font-bold text-md capitalize">{item.title}</div>
+                {item.summary && <div className="">{item.summary}</div>}
+              </div>
+              <div className="flex flex-wrap space-x-2">
+                {item.tags?.map((tagitem) => (
+                  <div className="text-gray-500 text-sm dark:text-gray-400" key={nanoid()}>
+                    {tagitem}
+                  </div>
+                ))}
+              </div>
+            </Link>
+          ))}
+        </div>
+      </div>
+      <div className="my-3 text-center text-gray-500 dark:text-gray-400">
+        <p className="mx-auto text-sm">{"For search efficiency, only the first 20 results are displayed."}</p>
+      </div>
+    </div>
+  );
+};