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,30 +17,34 @@ const TendersList = () => {
   }, []);
   console.log(tenders);
   return (
-    <div className="flex flex-col gap-2 pb-[96px] items-center">
-      {tenders?.results?.map((tender) => (
-        <TenderCard
-          key={tender.id}
-          id={tender.id}
-          id_of_card={tender.id_of_card}
-          data_rk={tender.data_rk}
-          name_of_organization={tender.name_of_organization}
-          type_of_buy={tender.type_of_buy}
-          name_of_buy={tender.name_of_buy}
-          date_of_publication_datetime={tender.date_of_publication_datetime}
-          date_of_offer_datetime={tender.date_of_offer_datetime}
-          current_timestamp={tender.current_timestamp}
+    <div>
+      <SearchForm />
+
+      <div className="flex flex-col gap-2 pb-[96px] items-center">
+        {tenders?.results?.map((tender) => (
+          <TenderCard
+            key={tender.id}
+            id={tender.id}
+            id_of_card={tender.id_of_card}
+            data_rk={tender.data_rk}
+            name_of_organization={tender.name_of_organization}
+            type_of_buy={tender.type_of_buy}
+            name_of_buy={tender.name_of_buy}
+            date_of_publication_datetime={tender.date_of_publication_datetime}
+            date_of_offer_datetime={tender.date_of_offer_datetime}
+            current_timestamp={tender.current_timestamp}
+          />
+        ))}
+        <Pagination
+          activePage={activePage}
+          setActivePage={setActivePage}
+          prev={tenders.previous}
+          next={tenders.next}
+          count={tenders.count as number}
+          current_count={tenders.results.length}
+          limit={20}
         />
-      ))}
-      <Pagination
-        activePage={activePage}
-        setActivePage={setActivePage}
-        prev={tenders.previous}
-        next={tenders.next}
-        count={tenders.count as number}
-        current_count={tenders.results.length}
-        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: {