useSites Hook & Searchbar & Layout component

components/SearchAndLayout.tsx

@@ -0,0 +1,38 @@
+import { ChangeEvent } from "react";
+
+interface SearchAndLayoutProps {
+    search: string;
+    setSearch: (value: string) => void;
+    itemPerPage: number;
+    setItemPerPage: (value: number) => void;
+}
+
+const SearchAndLayout = ({
+    search,
+    setSearch,
+    itemPerPage,
+    setItemPerPage
+}: SearchAndLayoutProps) => (
+    <div className="flex gap-2 items-center pt-4">
+        <input
+            type="text"
+            placeholder="Search..."
+            className="input input-bordered w-full"
+            value={search}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => setSearch(e.target.value)}
+        />
+        <select
+            className="select w-24"
+            value={itemPerPage}
+            onChange={(e: ChangeEvent<HTMLSelectElement>) => 
+                setItemPerPage(Number(e.target.value))
+            }
+        >
+            <option disabled>Layout</option>
+            <option value={5}>List</option>
+            <option value={10}>Grid</option>
+        </select>
+    </div>
+);
+
+export default SearchAndLayout;