Add components for Act management and integrate Electron setup

components/book/SearchBook.tsx

@@ -0,0 +1,33 @@
+import {faSearch} from "@fortawesome/free-solid-svg-icons";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import React, {ChangeEvent, Dispatch, SetStateAction} from "react";
+import {t} from "i18next";
+import TextInput from "@/components/form/TextInput";
+
+export default function SearchBook(
+    {
+        searchQuery,
+        setSearchQuery,
+    }: {
+        searchQuery: string;
+        setSearchQuery: Dispatch<SetStateAction<string>>
+    }) {
+
+    return (
+        <div className="flex items-center relative my-5 w-full max-w-3xl">
+            <div className="relative flex-grow">
+                <div className="relative">
+                    <FontAwesomeIcon icon={faSearch}
+                                     className="absolute left-4 top-1/2 transform -translate-y-1/2 text-primary w-5 h-5 pointer-events-none z-10"/>
+                    <div className="pl-11">
+                        <TextInput
+                            value={searchQuery}
+                            setValue={(e: ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
+                            placeholder={t("searchBook.placeholder")}
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}