input component

app/shared/Header.tsx

@@ -1,26 +1,37 @@
+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 className="flex gap-2 items-center">
-        <span className="text-primary flex items-center gap-2">
-          <Truck size={24} color="currentColor" />
-          <div className="text-[#3A4147] text-sm font-bold">ارسال رایگان برای خرید بالای ۱۰۰ میلیون تومان</div>
-        </span>
-      </div>
+    <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" />
+            <div className="text-[#3A4147] text-sm font-bold">ارسال رایگان برای خرید بالای ۱۰۰ میلیون تومان</div>
+          </span>
+        </div>
 
-      <div className="flex text-sm font-bold gap-2 items-center">
-        <span className="text-primary">20%</span>
-        <span>تخفیف برای اولین سفارش خود دریافت کنید |</span>
-        <span>
-          کد تخفیف : <span className="text-primary">FIRSTORDER</span>
-        </span>
-      </div>
+        <div className="flex text-sm font-bold gap-2 items-center">
+          <span className="text-primary">20%</span>
+          <span>تخفیف برای اولین سفارش خود دریافت کنید |</span>
+          <span>
+            کد تخفیف : <span className="text-primary">FIRSTORDER</span>
+          </span>
+        </div>
 
-      <div className="flex gap-2 items-center">
-        <Profile className="text-primary" size={24} color="currentColor" />
-        <div>سلام حمید</div>
+        <div className="flex gap-2 items-center">
+          <Profile className="text-primary" size={24} color="currentColor" />
+          <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>
   );