chore: add placeholder props for the HeaderSearchBar component

src/app/components/Header/HeaderSearchBar/HeaderSearchBar.test.tsx

@@ -52,7 +52,7 @@ describe("HeaderSearchBar", () => {
 
 		fireEvent.click(getByTestId("header-search-bar__button"));
 
-		const input = getByTestId("Input");
+		const input = getByTestId("Input") as HTMLInputElement;
 
 		act(() => {
 			fireEvent.change(input, {

src/app/components/Header/HeaderSearchBar/HeaderSearchBar.tsx

@@ -4,11 +4,12 @@ import { clickOutsideHandler, useDebounce } from "app/hooks";
 import React, { useEffect, useRef, useState } from "react";
 
 type HeaderSearchBarProps = {
+	placeholder?: string;
 	children?: React.ReactNode;
 	onSearch?: any;
 };
 
-export const HeaderSearchBar = ({ children, onSearch }: HeaderSearchBarProps) => {
+export const HeaderSearchBar = ({ placeholder, children, onSearch }: HeaderSearchBarProps) => {
 	const [searchbarVisible, setSearchbarVisible] = useState(false);
 	const [query, setQuery] = useState("");
 
@@ -60,7 +61,7 @@ export const HeaderSearchBar = ({ children, onSearch }: HeaderSearchBarProps) =>
 					<div className="flex-1 mx-4">
 						<Input
 							className="border-none shadow-none"
-							placeholder="Search..."
+							placeholder={placeholder}
 							value={query}
 							onChange={(e) => setQuery((e.target as HTMLInputElement).value)}
 						/>
@@ -72,3 +73,7 @@ export const HeaderSearchBar = ({ children, onSearch }: HeaderSearchBarProps) =>
 		</>
 	);
 };
+
+HeaderSearchBar.defaultProps = {
+	placeholder: "Search...",
+};