Add search form

This commit is contained in:
anime committed 2024-08-30 19:21:36 +06:00
1 parent 69edf925fb
commit 77ae883510
4 files changed
+80 -23

No files matched your search

+35
View File
@@ -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;
+15
View File
@@ -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>

After

Width:  |  Height:  |  Size: 932 B