header added

src/assets/icons/dark-crimson-cart-icon.svg

@@ -0,0 +1,7 @@
+<svg id="bag-2" xmlns="http://www.w3.org/2000/svg" width="72.645" height="72.645" viewBox="0 0 72.645 72.645">
+  <path id="Vector" d="M0,17.137V14.2C0,7.391,5.479.7,12.289.066a13.622,13.622,0,0,1,14.953,13.56V17.8" transform="translate(22.702 6.079)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+  <path id="Vector-2" data-name="Vector" d="M17.407,42.376H35.568c12.168,0,14.347-4.873,14.983-10.806l2.27-18.161C53.639,6.023,51.52,0,38.6,0H14.38C1.455,0-.663,6.023.154,13.409L2.424,31.57C3.06,37.5,5.239,42.376,17.407,42.376Z" transform="translate(9.835 24.215)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+  <path id="Vector-3" data-name="Vector" d="M.495.5H.522" transform="translate(46.408 35.822)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+  <path id="Vector-4" data-name="Vector" d="M.495.5H.522" transform="translate(25.217 35.822)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+  <path id="Vector-5" data-name="Vector" d="M0,0H72.645V72.645H0Z" fill="none" opacity="0"/>
+</svg>

src/assets/icons/dark-crimson-profile-icon.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="72.826" height="72.826" viewBox="0 0 72.826 72.826">
+  <g id="profile-circle" transform="translate(0 0)">
+    <path id="Vector" d="M10.317,19.875a2.922,2.922,0,0,0-.728,0,9.953,9.953,0,1,1,.728,0Z" transform="translate(26.46 18.904)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+    <path id="Vector-2" data-name="Vector" d="M40.9,11.971a30.145,30.145,0,0,1-20.452,7.95A30.145,30.145,0,0,1,0,11.971C.3,9.118,2.124,6.327,5.371,4.142c8.314-5.523,21.909-5.523,30.162,0C38.78,6.327,40.6,9.118,40.9,11.971Z" transform="translate(15.961 46.836)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+    <path id="Vector-3" data-name="Vector" d="M60.688,30.344A30.344,30.344,0,1,1,30.344,0,30.344,30.344,0,0,1,60.688,30.344Z" transform="translate(6.069 6.069)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+    <path id="Vector-4" data-name="Vector" d="M0,0H72.826V72.826H0Z" transform="translate(72.826 72.826) rotate(180)" fill="none" opacity="0"/>
+  </g>
+</svg>

src/assets/icons/dark-crimson-search-box.svg

@@ -0,0 +1,5 @@
+<svg id="search-normal" xmlns="http://www.w3.org/2000/svg" width="72.645" height="72.645" viewBox="0 0 72.645 72.645">
+  <path id="Vector" d="M57.511,28.755A28.755,28.755,0,1,1,28.755,0,28.755,28.755,0,0,1,57.511,28.755Z" transform="translate(6.054 6.054)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+  <path id="Vector-2" data-name="Vector" d="M6.054,6.054,0,0" transform="translate(60.538 60.537)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+  <path id="Vector-3" data-name="Vector" d="M0,0H72.645V72.645H0Z" fill="none" opacity="0"/>
+</svg>

src/assets/icons/dark-crimson-vertical-line.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="5" height="73" viewBox="0 0 5 73">
+  <line id="Line_156" data-name="Line 156" y2="68" transform="translate(2.5 2.5)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-width="5"/>
+</svg>

src/components/Header/desgin1/HeaderDesign1.js

@@ -1,6 +1,17 @@
 import React from "react";
 
-const HeaderDesign1 = () => {
+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 verticalLineIcon from "../../../assets/icons/dark-crimson-vertical-line.svg";
+
+const HeaderDesign1 = ({
+  iconHolder,
+  loginBtn,
+  iconProfile,
+  iconCart,
+  iconSearch,
+}) => {
   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">
@@ -27,17 +38,44 @@ const HeaderDesign1 = () => {
             وبلاگ
           </a>
         </div>
-        <div className="w-1/5	 flex justify-end">
+        {loginBtn && (
-          <button className="ml-2 py-2 px-8 text-productPrice text-sm font-light rounded border border-darkCrimsonBorderColor">
+          <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>
+              ورود
-          <button className="py-2 px-8 text-white text-sm font-light rounded bg-darkCrimsonBgColor">
+            </button>
-            ثبت نام
+            {/* <img src={verticalLineIcon} alt="" className="" /> */}
-          </button>
+            <button className="py-2 px-8 text-white text-sm font-light rounded bg-darkCrimsonBgColor">
-        </div>
+              ثبت نام
+            </button>
+          </div>
+        )}
+        {iconHolder && (
+          <div className="w-1/5	flex justify-end ">
+            {iconCart && (
+              <img src={searchIcon} alt="" className="w-7 h-7 ml-2" />
+            )}
+            {iconSearch && (
+              <img src={cartIcon} alt="" className="w-7 h-7 ml-2" />
+            )}
+            {iconProfile && (
+              <img src={profileIcon} alt="" className="w-7 h-7" />
+            )}
+          </div>
+        )}
       </div>
     </header>
   );
 };
 
 export default HeaderDesign1;
+
+// یک تگ دیو در نظر گرفتم برای 3 تا ایکن سرچ/پروفایل/اضافه کردن به سبد خرید که اینارو انداختم داخل دیو ایکن هولدر
+
+HeaderDesign1.defaultProps = {
+  loginBtn: true,
+
+  iconHolder: false,
+  iconProfile: false,
+  iconCart: false,
+  iconSearch: false,
+};