From a921f6affeb2a67650717f1e5a4d07940b04b7a8 Mon Sep 17 00:00:00 2001 From: mahdi andalib Date: Wed, 11 May 2022 14:59:15 +0430 Subject: [PATCH] update src/components/Navbar/HeaderDesign1/index.js and src/components/Navbar/index.js --- src/components/Navbar/HeaderDesign1/index.js | 113 ++++++-------- .../Navbar/HeaderDesign2/arrow-down.svg | 4 + src/components/Navbar/HeaderDesign2/index.js | 140 ++++++++++++++++++ .../Navbar/HeaderDesign2/profile-pic.svg | 8 + .../Navbar/HeaderDesign2/search-normal.svg | 5 + src/components/Navbar/index.js | 2 + 6 files changed, 205 insertions(+), 67 deletions(-) create mode 100644 src/components/Navbar/HeaderDesign2/arrow-down.svg create mode 100644 src/components/Navbar/HeaderDesign2/index.js create mode 100644 src/components/Navbar/HeaderDesign2/profile-pic.svg create mode 100644 src/components/Navbar/HeaderDesign2/search-normal.svg diff --git a/src/components/Navbar/HeaderDesign1/index.js b/src/components/Navbar/HeaderDesign1/index.js index 0360492..a59e5c7 100644 --- a/src/components/Navbar/HeaderDesign1/index.js +++ b/src/components/Navbar/HeaderDesign1/index.js @@ -1,4 +1,5 @@ import React from "react"; +import Button from "../../ButtonDesign/Button"; import Search from "../../SearchDesign/Search"; @@ -9,115 +10,96 @@ const HeaderDesign1 = ({ searchBox, topHeader, bottomHeader, - productCategoryTextColor, - menuItemsColor, }) => { return ( -
+
<> {topHeader && (
-
- - انتخاب کشور - - - پیگیری سفارش - +
+ انتخاب کشور + پیگیری سفارش
-
- +
+ شکایات  - + ورود و ثبت نام
)} -
+
-
-
- +
+
+ Design System {category && ( - + دسته بندی ها )}
-
- {menuItems?.map((item, index) => ( - - {item} - - ))} -
+ {searchBox === false && ( +
+ {menuItems?.map((item, index) => ( + + {item} + + ))} +
+ )} {searchBox && ( -
+
)} {loginBtn && ( -
- - +
+
)} -
- +
+
{bottomHeader && ( <> -
-
-
+
+
+
- - + دسته بندی کالاها
-
+
{menuItems.map((item, index) => ( - + {item} ))} @@ -132,9 +114,6 @@ const HeaderDesign1 = ({ export default HeaderDesign1; HeaderDesign1.defaultProps = { - productCategoryTextColor: "text-productPrice", - menuItemsColor: "text-productPrice", - border: "border", topHeader: true, bottomHeader: true, @@ -147,8 +126,8 @@ HeaderDesign1.defaultProps = { "وبلاگ", ], - category: true, - searchBox: true, + category: false, + searchBox: false, // icons - loginBtn: true, + loginBtn: false, }; diff --git a/src/components/Navbar/HeaderDesign2/arrow-down.svg b/src/components/Navbar/HeaderDesign2/arrow-down.svg new file mode 100644 index 0000000..3247f0c --- /dev/null +++ b/src/components/Navbar/HeaderDesign2/arrow-down.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/Navbar/HeaderDesign2/index.js b/src/components/Navbar/HeaderDesign2/index.js new file mode 100644 index 0000000..205b9cf --- /dev/null +++ b/src/components/Navbar/HeaderDesign2/index.js @@ -0,0 +1,140 @@ +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 profilePic from "./profile-pic.svg"; +import downwardArrow from "./arrow-down.svg"; +import search from "./search-normal.svg"; +import Switch from "../../Switch"; + +const HeaderDesign2 = ({ username, userJob }) => { + return ( +
+ {/* {headerDivider && ( +
+ )} */} +
+
+ + دانوین + +
+ + + +
+
+ +
+
+ + +
+ {/*
+
+ +
+
*/} + {/*

Price`}> + 140,000 + + تومان + +

*/} + {/* */} + {/* */} + + {/* */} + {/* */} +
+
+

{username}

+

{userJob}

+
+ arrow + profile-pic +
+
+
+
+ ); +}; + +export default HeaderDesign2; + +HeaderDesign2.defaultProps = { + username: "رستم پهلوان زاده", + userJob: "مدیریت سامانه هوشمند", + + headerDivider: true, + + topHeader: true, + bottomHeader: true, + + menuItems: false, + category: false, + searchBox: true, + + // icons + loginBtn: true, + + whiteIconCart: false, + darkCrimsonIconCart: false, + + whiteIconHamburgerMenu: false, + darkIconHamburgerMenu: true, + + iconHolder: true, + iconProfile: false, + iconCart: true, + iconSearch: false, +}; diff --git a/src/components/Navbar/HeaderDesign2/profile-pic.svg b/src/components/Navbar/HeaderDesign2/profile-pic.svg new file mode 100644 index 0000000..0367242 --- /dev/null +++ b/src/components/Navbar/HeaderDesign2/profile-pic.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/Navbar/HeaderDesign2/search-normal.svg b/src/components/Navbar/HeaderDesign2/search-normal.svg new file mode 100644 index 0000000..842c907 --- /dev/null +++ b/src/components/Navbar/HeaderDesign2/search-normal.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js index 7bd050c..b8e9d18 100644 --- a/src/components/Navbar/index.js +++ b/src/components/Navbar/index.js @@ -1,10 +1,12 @@ import React, { useState } from "react"; import HeaderDesign1 from "./HeaderDesign1"; +import HeaderDesign2 from "./HeaderDesign2"; function Navbar() { const list = { 1: , + 2: , }; const [type, setType] = useState(1); return (