Add search form

src/features/SearchForm/SearchForm.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import Image from "next/image";
+import search from "./icons/search.svg";
+import { useTranslations } from "next-intl";
+
+const SearchForm = () => {
+  const t = useTranslations("general");
+
+  return (
+    <form className="mb-8 h-12 w-full relative flex items-center">
+      <div className="h-full flex flex-1 items-center border border-black rounded-sm bg-white">
+        <Image
+          className="w-12 h-12 p-2"
+          src={search}
+          alt="Search button icon"
+        />
+        <input
+          placeholder="Ключевое слово или номер"
+          type="text"
+          className="px-3 pl-2 w-full h-full text-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          aria-label={t("search")}
+        />
+      </div>
+      <button
+        className="h-full w-24 rounded-sm bg-blue text-white"
+        type="submit"
+      >
+        {t("search")}
+      </button>
+    </form>
+  );
+};
+
+export default SearchForm;

src/features/SearchForm/icons/search.svg

@@ -0,0 +1,15 @@
+<svg width="24.000000" height="24.959961" viewBox="0 0 24 24.96" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<desc>
+			Created with Pixso.
+	</desc>
+	<defs>
+		<clipPath id="clip18_5000">
+			<rect id="search" width="24.000000" height="24.959999" fill="white" fill-opacity="0"/>
+		</clipPath>
+	</defs>
+	<rect id="search" width="24.000000" height="24.959999" fill="#FFFFFF" fill-opacity="0"/>
+	<g clip-path="url(#clip18_5000)">
+		<path id="Vector" d="M11 19.7598C6.58154 19.7598 3 16.0352 3 11.4404C3 6.84473 6.58154 3.12012 11 3.12012C15.4185 3.12012 19 6.84473 19 11.4404C19 16.0352 15.4185 19.7598 11 19.7598Z" stroke="#C5C6C5" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linejoin="round"/>
+		<path id="Vector" d="M21 21.8408L16.6499 17.3164" stroke="#C5C6C5" stroke-opacity="1.000000" stroke-width="2.000000" stroke-linejoin="round" stroke-linecap="round"/>
+	</g>
+</svg>

src/widgets/TendersList/TendersList.tsx

@@ -4,6 +4,7 @@ import { useTendersStore } from "./tendersStore";
 import { data } from "autoprefixer";
 import TenderCard from "@/entities/TenderCard";
 import Pagination from "@/features/Pagination/Pagination";
+import SearchForm from "@/features/SearchForm/SearchForm";
 
 interface Props {}
 const TendersList = () => {
@@ -16,6 +17,9 @@ const TendersList = () => {
   }, []);
   console.log(tenders);
   return (
+    <div>
+      <SearchForm />
+
       <div className="flex flex-col gap-2 pb-[96px] items-center">
         {tenders?.results?.map((tender) => (
           <TenderCard
@@ -41,6 +45,7 @@ const TendersList = () => {
           limit={20}
         />
       </div>
+    </div>
   );
 };
 

tailwind.config.ts

@@ -6,6 +6,8 @@ const config: Config = {
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/widgets/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/entities/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/features/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {