header added

master
mahdi 3 years ago
parent 01c4408c71
commit fe32090716
  1. 7
      src/assets/icons/dark-crimson-cart-icon.svg
  2. 8
      src/assets/icons/dark-crimson-profile-icon.svg
  3. 5
      src/assets/icons/dark-crimson-search-box.svg
  4. 3
      src/assets/icons/dark-crimson-vertical-line.svg
  5. 56
      src/components/Header/desgin1/HeaderDesign1.js

@ -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>

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -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>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -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>

After

Width:  |  Height:  |  Size: 646 B

@ -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>

After

Width:  |  Height:  |  Size: 242 B

@ -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">
<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>
</div>
{loginBtn && (
<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>
{/* <img src={verticalLineIcon} alt="" className="" /> */}
<button className="py-2 px-8 text-white text-sm font-light rounded bg-darkCrimsonBgColor">
ثبت نام
</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,
};

Loading…
Cancel
Save