From fe320907162244e0141722f9b5e7f1e8c37abe9f Mon Sep 17 00:00:00 2001 From: mahdi Date: Mon, 27 Dec 2021 14:53:15 +0330 Subject: [PATCH] header added --- src/assets/icons/dark-crimson-cart-icon.svg | 7 +++ .../icons/dark-crimson-profile-icon.svg | 8 +++ src/assets/icons/dark-crimson-search-box.svg | 5 ++ .../icons/dark-crimson-vertical-line.svg | 3 + .../Header/desgin1/HeaderDesign1.js | 56 ++++++++++++++++--- 5 files changed, 70 insertions(+), 9 deletions(-) create mode 100644 src/assets/icons/dark-crimson-cart-icon.svg create mode 100644 src/assets/icons/dark-crimson-profile-icon.svg create mode 100644 src/assets/icons/dark-crimson-search-box.svg create mode 100644 src/assets/icons/dark-crimson-vertical-line.svg diff --git a/src/assets/icons/dark-crimson-cart-icon.svg b/src/assets/icons/dark-crimson-cart-icon.svg new file mode 100644 index 0000000..151d5e0 --- /dev/null +++ b/src/assets/icons/dark-crimson-cart-icon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/icons/dark-crimson-profile-icon.svg b/src/assets/icons/dark-crimson-profile-icon.svg new file mode 100644 index 0000000..3879312 --- /dev/null +++ b/src/assets/icons/dark-crimson-profile-icon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/icons/dark-crimson-search-box.svg b/src/assets/icons/dark-crimson-search-box.svg new file mode 100644 index 0000000..ab021fe --- /dev/null +++ b/src/assets/icons/dark-crimson-search-box.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/dark-crimson-vertical-line.svg b/src/assets/icons/dark-crimson-vertical-line.svg new file mode 100644 index 0000000..693271e --- /dev/null +++ b/src/assets/icons/dark-crimson-vertical-line.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Header/desgin1/HeaderDesign1.js b/src/components/Header/desgin1/HeaderDesign1.js index 6d6868f..ee2efe5 100644 --- a/src/components/Header/desgin1/HeaderDesign1.js +++ b/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 (
@@ -27,17 +38,44 @@ const HeaderDesign1 = () => { وبلاگ
-
- - -
+ {loginBtn && ( +
+ + {/* */} + +
+ )} + {iconHolder && ( +
+ {iconCart && ( + + )} + {iconSearch && ( + + )} + {iconProfile && ( + + )} +
+ )}
); }; export default HeaderDesign1; + +// یک تگ دیو در نظر گرفتم برای 3 تا ایکن سرچ/پروفایل/اضافه کردن به سبد خرید که اینارو انداختم داخل دیو ایکن هولدر + +HeaderDesign1.defaultProps = { + loginBtn: true, + + iconHolder: false, + iconProfile: false, + iconCart: false, + iconSearch: false, +};