input component

app/components/Input.tsx

@@ -0,0 +1,30 @@
+import { SearchNormal } from "iconsax-reactjs";
+import { forwardRef } from "react";
+
+export type InputVariant = "primary" | "search";
+
+type Props = {
+  variant?: InputVariant;
+} & React.InputHTMLAttributes<HTMLInputElement>;
+
+const Input = forwardRef<HTMLInputElement, Props>(({ variant = "search", className, type, ...props }, ref) => {
+  const isSearch = variant === "search";
+
+  return (
+    <div className="relative w-full" dir="rtl">
+      {isSearch && <SearchNormal aria-hidden="true" className="pointer-events-none absolute top-1/2 right-5 -translate-y-1/2 text-primary" color="currentColor" size={24} />}
+      <input
+        ref={ref}
+        type={type ?? (isSearch ? "search" : "text")}
+        className={`h-12 w-full rounded-2xl border border-secondary bg-white px-5 text-right text-sm text-[#3A4147] placeholder:text-[#D7E0E8] transition-colors focus:border-primary ${
+          isSearch ? "pr-13" : ""
+        } ${className ?? ""}`}
+        {...props}
+      />
+    </div>
+  );
+});
+
+Input.displayName = "Input";
+
+export default Input;

app/shared/Header.tsx

@@ -1,8 +1,12 @@
+import logo from "@/assets/images/logo.png";
 import { Profile, Truck } from "iconsax-reactjs";
+import Image from "next/image";
+import Input from "../components/Input";
 
 const Header = () => {
   return (
-    <div className="px-[120px] h-12 bg-secondary flex items-center justify-between">
+    <div>
+      <div className="h-12 bg-secondary flex items-center justify-between px-[120px]">
         <div className="flex gap-2 items-center">
           <span className="text-primary flex items-center gap-2">
             <Truck size={24} color="currentColor" />
@@ -23,6 +27,13 @@ const Header = () => {
           <div>سلام حمید</div>
         </div>
       </div>
+      <div className="bg-white h-[120px] flex gap-16 items-center border border-secondary px-[120px]">
+        <Image src={logo} alt="logo" width={116} height={72} />
+        <div className="flex-1">
+          <Input variant="search" placeholder="جستجوی محصول" />
+        </div>
+      </div>
+    </div>
   );
 };