update

src/assets/icons/light-gray-search-box.svg

@@ -0,0 +1,7 @@
+<svg id="vuesax_linear_search-normal" data-name="vuesax/linear/search-normal" xmlns="http://www.w3.org/2000/svg" width="38.895" height="38.895" viewBox="0 0 38.895 38.895">
+  <g id="search-normal">
+    <path id="Vector" d="M30.792,15.4A15.4,15.4,0,1,1,15.4,0,15.4,15.4,0,0,1,30.792,15.4Z" transform="translate(3.241 3.241)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M3.241,3.241,0,0" transform="translate(32.412 32.412)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-3" data-name="Vector" d="M0,0H38.895V38.895H0Z" fill="none" opacity="0"/>
+  </g>
+</svg>

src/components/Header/desgin1/HeaderDesign1.js

@@ -3,6 +3,7 @@ import React from "react";
 import cartIcon from "../../../assets/icons/dark-crimson-cart-icon.svg";
 import profileIcon from "../../../assets/icons/dark-crimson-profile-icon.svg";
 import searchIcon from "../../../assets/icons/dark-crimson-search-box.svg";
+import lightGraySearchIcon from "../../../assets/icons/light-gray-search-box.svg";
 import verticalLineIcon from "../../../assets/icons/dark-crimson-vertical-line.svg";
 
 const HeaderDesign1 = ({
@@ -11,40 +12,68 @@ const HeaderDesign1 = ({
   iconProfile,
   iconCart,
   iconSearch,
+  border,
+  btnRounded,
+  btnPY,
+  btnPX,
+  loginBtnBgColor,
+  loginBorderColor,
+  registerBtnBgColor,
+  loginTextColor,
+  registerTextColor,
+  menuItems,
+  category,
 }) => {
   return (
     <header className="p-4">
-      <div class="container flex justify-between items-center mx-auto py-2 px-8 md:px-14 lg:px-24 w-full bg-white rounded shadow-sm">
+      <div className="container flex justify-evenly items-center mx-auto py-2 px-8 md:px-14 lg:px-24 w-full bg-white rounded shadow-sm">
-        <div class="text-lg font-bold text-productPrice  w-1/5	">
+        <div className="text-lg font-bold text-productPrice  w-1/5	">
           Design System
         </div>
-        <div class="hidden lg:flex items-center justify-around w-3/5">
+        {category && (
-          <a href="#" className="text-productPrice">
+          <div className="text-md text-productPrice">دسته بندی ها</div>
-            محصولات
+        )}
-          </a>
+        {menuItems && (
-          <a href="#" className="text-productPrice">
+          <div className="hidden lg:flex items-center justify-around w-3/5">
-            دسته بندی
+            <a href="#" className="text-productPrice">
-          </a>
+              محصولات
-          <a href="#" className="text-productPrice">
+            </a>
-            تماس با ما
+            <a href="#" className="text-productPrice">
-          </a>
+              دسته بندی
-          <a href="#" className="text-productPrice">
+            </a>
-            درباره ما
+            <a href="#" className="text-productPrice">
-          </a>
+              تماس با ما
-          <a href="#" className="text-productPrice">
+            </a>
-            پیگیری
+            <a href="#" className="text-productPrice">
-          </a>
+              درباره ما
-          <a href="#" className="text-productPrice">
+            </a>
-            وبلاگ
+            <a href="#" className="text-productPrice">
-          </a>
+              پیگیری
+            </a>
+            <a href="#" className="text-productPrice">
+              وبلاگ
+            </a>
+          </div>
+        )}
+        <div className="bg-yellow-400">
+          <img src={lightGraySearchIcon} alt="" className="w-4 h-4" />
+          <input
+            type="text"
+            placeholder="نام کالا را جستجو کنید..."
+            className="bg-red-100 text-xs rounded px-8 py-2"
+          />
         </div>
         {loginBtn && (
           <div className="w-1/5	flex justify-end">
-            <button className="ml-2 py-2 px-8 text-productPrice text-sm font-light rounded border border-darkCrimsonBorderColor">
+            <button
+              className={`ml-2 text-sm font-light ${border} ${btnRounded} ${btnPY} ${btnPX} ${loginBtnBgColor} ${loginBorderColor} ${loginTextColor}`}
+            >
               ورود
             </button>
             {/* <img src={verticalLineIcon} alt="" className="" /> */}
-            <button className="py-2 px-8 text-white text-sm font-light rounded bg-darkCrimsonBgColor">
+            <button
+              className={`ml-2 text-sm font-light ${border} ${btnRounded} ${btnPY} ${btnPX} ${registerBtnBgColor} ${registerTextColor}`}
+            >
               ثبت نام
             </button>
           </div>
@@ -72,6 +101,19 @@ export default HeaderDesign1;
 // یک تگ دیو در نظر گرفتم برای 3 تا ایکن سرچ/پروفایل/اضافه کردن به سبد خرید که اینارو انداختم داخل دیو ایکن هولدر
 
 HeaderDesign1.defaultProps = {
+  border: "border",
+  loginBorderColor: "border-darkCrimsonBorderColor",
+  btnRounded: "rounded-sm",
+  loginBtnBgColor: "bg-white",
+  loginTextColor: "text-productPrice",
+  registerBtnBgColor: "bg-darkCrimsonBgColor",
+  registerTextColor: "text-white",
+  btnPY: "py-2",
+  btnPX: "px-8",
+
+  menuItems: false,
+  category: true,
+  // icons
   loginBtn: true,
 
   iconHolder: false,