update

src/components/Header/desgin1/HeaderDesign1.js

@@ -23,71 +23,108 @@ const HeaderDesign1 = ({
   registerTextColor,
   menuItems,
   category,
+  searchBox,
 }) => {
   return (
-    <header className="p-4">
-      <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 className="text-lg font-bold text-productPrice  w-1/5	">
-          Design System
+    <header className="container mx-auto py-2 px-8 w-full bg-white rounded shadow-sm">
+      <div className="flex justify-between items-center mb-7">
+        <div className="">
+          <span className="text-xs font-light ml-4 text-productPrice">
+            انتخاب کشور
+          </span>
+          <span className="text-xs font-light text-productPrice">
+            پیگیری سفارش
+          </span>
+        </div>
+        <div className="">
+          <span className="text-xs font-light text-productPrice">شکایات</span>
+          <span className="text-xs font-light mr-4 text-productPrice">
+            ورود و ثبت نام
+          </span>
+        </div>
+      </div>
+      <div className="flex justify-between items-center">
+        <div className="ml-10">
+          <span className="text-sm font-bold text-productPrice ml-4">
+            Design System
+          </span>
+          {category && (
+            <span className="text-sm font-bold text-productPrice ">
+              دسته بندی ها
+            </span>
+          )}
         </div>
-        {category && (
-          <div className="text-md text-productPrice">دسته بندی ها</div>
-        )}
         {menuItems && (
-          <div className="hidden lg:flex items-center justify-around w-3/5">
-            <a href="#" className="text-productPrice">
+          <div
+            className="hidden lg:flex items-center justify-around flex-1"
+            style={{ maxWidth: 700 }}
+          >
+            <a href="#" className="text-productPrice text-xs">
               محصولات
             </a>
-            <a href="#" className="text-productPrice">
+            <a href="#" className="text-productPrice text-xs">
               دسته بندی
             </a>
-            <a href="#" className="text-productPrice">
+            <a href="#" className="text-productPrice text-xs">
               تماس با ما
             </a>
-            <a href="#" className="text-productPrice">
+            <a href="#" className="text-productPrice text-xs">
               درباره ما
             </a>
-            <a href="#" className="text-productPrice">
+            <a href="#" className="text-productPrice text-xs">
               پیگیری
             </a>
-            <a href="#" className="text-productPrice">
+            <a href="#" className="text-productPrice text-xs">
               وبلاگ
             </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>
+        {searchBox && (
+          <div
+            className="flex flex-row-reverse flex-1 items-center relative"
+            style={{ maxWidth: 800 }}
+          >
+            <img
+              src={lightGraySearchIcon}
+              alt=""
+              className="w-4 h-4 absolute left-3"
+            />
+            <input
+              type="text"
+              placeholder="نام کالا را جستجو کنید..."
+              className="text-xs rounded-lg pr-4 pl-10 py-2 w-full border border-gray-400"
+            />
+          </div>
+        )}
         {loginBtn && (
-          <div className="w-1/5	flex justify-end">
+          <div className="flex justify-end mr-7">
             <button
-              className={`ml-2 text-sm font-light ${border} ${btnRounded} ${btnPY} ${btnPX} ${loginBtnBgColor} ${loginBorderColor} ${loginTextColor}`}
+              className={`ml-2 text-xs font-light ${border} ${btnRounded} ${btnPY} ${btnPX} ${loginBtnBgColor} ${loginBorderColor} ${loginTextColor}`}
             >
               ورود
             </button>
             {/* <img src={verticalLineIcon} alt="" className="" /> */}
             <button
-              className={`ml-2 text-sm font-light ${border} ${btnRounded} ${btnPY} ${btnPX} ${registerBtnBgColor} ${registerTextColor}`}
+              className={`ml-2 text-xs font-light ${border} ${btnRounded} ${btnPY} ${btnPX} ${registerBtnBgColor} ${loginBorderColor} ${registerTextColor}`}
             >
               ثبت نام
             </button>
           </div>
         )}
         {iconHolder && (
-          <div className="w-1/5	flex justify-end ">
-            {iconCart && (
-              <img src={searchIcon} alt="" className="w-7 h-7 ml-2" />
-            )}
+          <div className="w-1/5	flex justify-end items-center ">
+            <p className="text-xs text-productPrice ml-2">
+              140,000
+              <span className="text-xs font-light text-productPrice">
+                تومان
+              </span>
+            </p>
+            {iconCart && <img src={cartIcon} alt="" className="w-5 h-5 ml-2" />}
             {iconSearch && (
-              <img src={cartIcon} alt="" className="w-7 h-7 ml-2" />
+              <img src={searchIcon} alt="" className="w-5 h-5 ml-2" />
             )}
             {iconProfile && (
-              <img src={profileIcon} alt="" className="w-7 h-7" />
+              <img src={profileIcon} alt="" className="w-5 h-5" />
             )}
           </div>
         )}
@@ -103,7 +140,7 @@ export default HeaderDesign1;
 HeaderDesign1.defaultProps = {
   border: "border",
   loginBorderColor: "border-darkCrimsonBorderColor",
-  btnRounded: "rounded-sm",
+  btnRounded: "rounded-md",
   loginBtnBgColor: "bg-white",
   loginTextColor: "text-productPrice",
   registerBtnBgColor: "bg-darkCrimsonBgColor",
@@ -111,13 +148,14 @@ HeaderDesign1.defaultProps = {
   btnPY: "py-2",
   btnPX: "px-8",
 
-  menuItems: false,
-  category: true,
+  menuItems: true,
+  category: false,
+  searchBox: false,
   // icons
-  loginBtn: true,
+  loginBtn: false,
 
-  iconHolder: false,
+  iconHolder: true,
   iconProfile: false,
-  iconCart: false,
+  iconCart: true,
   iconSearch: false,
 };