update

src/App.js

@@ -15,17 +15,17 @@ import HeaderDesign1 from "./components/Header/desgin1/HeaderDesign1";
 function App() {
   return (
     <div className="App">
-      <ProductDesign />
+      {/* <ProductDesign /> */}
-      <BookDesign />
+      {/* <BookDesign /> */}
-      <ButtonDesign />
+      {/* <ButtonDesign /> */}
-      <ProductTags />
+      {/* <ProductTags /> */}
-      <CounterDesign />
+      {/* <CounterDesign /> */}
-      <BlogDesign1 />
+      {/* <BlogDesign1 /> */}
-      <BlogDesign2 />
+      {/* <BlogDesign2 /> */}
-      <BlogDesign3 />
+      {/* <BlogDesign3 /> */}
-      <BlogDesign4 />
+      {/* <BlogDesign4 /> */}
-      <BlogDesign5 />
+      {/* <BlogDesign5 /> */}
-      <BlogDesign6 />
+      {/* <BlogDesign6 /> */}
       <HeaderDesign1 />
     </div>
   );

src/assets/icons/white-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="#fff" 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="#fff" 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="#fff" 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="#fff" 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/white-hamburger-menu-icon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.881" height="25.028" viewBox="0 0 31.881 25.028">
+  <g id="vuesax_linear_textalign-justifycenter" data-name="vuesax/linear/textalign-justifycenter" transform="translate(-369.108 -201.5)">
+    <g id="textalign-justifycenter" transform="translate(364 193.088)">
+      <path id="Vector" d="M0,0H28.881" transform="translate(6.608 9.913)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+      <path id="Vector-2" data-name="Vector" d="M0,0H28.881" transform="translate(6.608 20.926)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+      <path id="Vector-3" data-name="Vector" d="M0,0H28.881" transform="translate(6.608 31.94)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+    </g>
+  </g>
+</svg>

src/components/Header/desgin1/HeaderDesign1.js

@@ -1,11 +1,12 @@
 import React from "react";
 
 import cartIcon from "../../../assets/icons/dark-crimson-cart-icon.svg";
+import whiteCartIcon from "../../../assets/icons/white-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 darkCrimsonHamburgerMenu from "../../../assets/icons/dark-crimson-hamburger-menu.svg";
-import verticalLineIcon from "../../../assets/icons/dark-crimson-vertical-line.svg";
+import whiteHamburgerMenu from "../../../assets/icons/white-hamburger-menu-icon.svg";
 
 const HeaderDesign1 = ({
   iconHolder,
@@ -27,24 +28,36 @@ const HeaderDesign1 = ({
   searchBox,
   topHeader,
   bottomHeader,
+  priceHolder,
+  tomanColor,
+  headerBgColor,
+  siteNameTextColor,
+  productCategoryTextColor,
+  menuItemsColor,
+  topHeaderItemsColor,
+  whiteIconCart,
+  whiteIconHamburgerMenu,
+  darkIconHamburgerMenu,
 }) => {
   return (
-    <header className="container mx-auto py-2 px-8 w-full bg-white rounded shadow-sm mb-20">
+    <header
+      className={`container mx-auto py-2 px-8 rounded-b-md w-full shadow-sm mb-20 ${headerBgColor}`}
+    >
       {topHeader && (
         <div className="flex justify-between items-center mb-2">
           <div className="">
-            <span className="text-xs font-light ml-4 text-productPrice">
+            <span className={`text-xs font-light ml-4  ${topHeaderItemsColor}`}>
               انتخاب کشور
             </span>
-            <span className="text-xs font-light text-productPrice">
+            <span className={`text-xs font-light ${topHeaderItemsColor}`}>
               پیگیری سفارش
             </span>
           </div>
           <div className="">
-            <span className="text-xs font-light text-productPrice ml-2 ">
+            <span className={`text-xs font-light ml-2 ${topHeaderItemsColor}`}>
-              شکایات{" "}
+              شکایات
             </span>
-            <span className="text-xs font-light text-productPrice">
+            <span className={`text-xs font-light ${topHeaderItemsColor}`}>
               ورود و ثبت نام
             </span>
           </div>
@@ -52,11 +65,11 @@ const HeaderDesign1 = ({
       )}
       <div className="flex justify-between items-center relative">
         <div className="ml-10">
-          <span className="text-sm font-bold text-productPrice ml-4">
+          <span className={`text-sm font-bold ml-4 ${siteNameTextColor}`}>
             Design System
           </span>
           {category && (
-            <span className="text-sm font-bold text-productPrice ">
+            <span className={`text-sm font-bold ${productCategoryTextColor}`}>
               دسته بندی ها
             </span>
           )}
@@ -122,13 +135,14 @@ const HeaderDesign1 = ({
         )}
         {iconHolder && (
           <div className="w-1/5	flex justify-end items-center ">
-            <p className="text-xs text-productPrice ml-2">
+            <p className={`text-xs ml-2 ${priceHolder}`}>
               140,000
-              <span className="text-xs font-light text-productPrice">
+              <span className={`text-xs font-light  ${tomanColor}`}>تومان</span>
-                تومان
-              </span>
             </p>
             {iconCart && <img src={cartIcon} alt="" className="w-5 h-5 ml-2" />}
+            {whiteIconCart && (
+              <img src={whiteCartIcon} alt="" className="w-5 h-5 ml-2" />
+            )}
             {iconSearch && (
               <img src={searchIcon} alt="" className="w-5 h-5 ml-2" />
             )}
@@ -141,31 +155,36 @@ const HeaderDesign1 = ({
       {bottomHeader && (
         <div className="flex items-center mt-4 relative w-full ">
           <div className="ml-10 flex items-center">
+            {darkIconHamburgerMenu && (
               <img src={darkCrimsonHamburgerMenu} alt="" className="w-5 h-5" />
-            <span className="text-xs text-productPrice mr-2">
+            )}
-              دسته بندی ها کالاها
+            {whiteIconHamburgerMenu && (
+              <img src={whiteHamburgerMenu} alt="" className="w-3 h-3" />
+            )}
+            <span className={`text-xs mr-2 ${productCategoryTextColor}`}>
+              دسته بندی کالاها
             </span>
           </div>
           <div
             className="hidden lg:flex items-center justify-around w-3/5 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
             style={{ maxWidth: 700 }}
           >
-            <a href="#" className="text-productPrice text-xs">
+            <a href="#" className={`text-xs ${menuItemsColor}`}>
               محصولات
             </a>
-            <a href="#" className="text-productPrice text-xs">
+            <a href="#" className={`text-xs ${menuItemsColor}`}>
               دسته بندی
             </a>
-            <a href="#" className="text-productPrice text-xs">
+            <a href="#" className={`text-xs ${menuItemsColor}`}>
               تماس با ما
             </a>
-            <a href="#" className="text-productPrice text-xs">
+            <a href="#" className={`text-xs ${menuItemsColor}`}>
               درباره ما
             </a>
-            <a href="#" className="text-productPrice text-xs">
+            <a href="#" className={`text-xs ${menuItemsColor}`}>
               پیگیری
             </a>
-            <a href="#" className="text-productPrice text-xs">
+            <a href="#" className={`text-xs ${menuItemsColor}`}>
               وبلاگ
             </a>
           </div>
@@ -179,14 +198,39 @@ export default HeaderDesign1;
 
 // یک تگ دیو در نظر گرفتم برای 3 تا ایکن سرچ/پروفایل/اضافه کردن به سبد خرید که اینارو انداختم داخل دیو ایکن هولدر
 
+// text colors that is used in this component
+// text-productPrice
+// text-white
+
+// background colors that is used in this component
+// bg-darkCrimsonBgColor
+
+// border colors that is used in this component
+// border-darkCrimsonBorderColor
+
 HeaderDesign1.defaultProps = {
+  headerBgColor: "bg-white",
+
+  siteNameTextColor: "text-productPrice",
+  productCategoryTextColor: "text-productPrice",
+
+  menuItemsColor: "text-productPrice",
+
+  topHeaderItemsColor: "text-productPrice",
+
   border: "border",
-  loginBorderColor: "border-darkCrimsonBorderColor",
   btnRounded: "rounded-md",
+
+  loginBorderColor: "border-darkCrimsonBorderColor",
   loginBtnBgColor: "bg-white",
   loginTextColor: "text-productPrice",
+
   registerBtnBgColor: "bg-darkCrimsonBgColor",
   registerTextColor: "text-white",
+
+  tomanColor: "text-productPrice",
+  priceHolder: "text-productPrice",
+
   btnPY: "py-2",
   btnPX: "px-8",
 
@@ -196,9 +240,16 @@ HeaderDesign1.defaultProps = {
   menuItems: false,
   category: false,
   searchBox: true,
+
   // icons
   loginBtn: false,
 
+  whiteIconCart: true,
+  darkCrimsonIconCart: false,
+
+  whiteIconHamburgerMenu: false,
+  darkIconHamburgerMenu: true,
+
   iconHolder: true,
   iconProfile: false,
   iconCart: true,