You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

148 lines
5.4 KiB

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 whiteHamburgerMenu from "../../../assets/icons/white-hamburger-menu-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 HeaderDesign1 = ({ username, userJob }) => {
return (
<header
className={`mx-auto py-3 px-4 rounded-b-md w-full shadow-sm bg-white`}
>
{/* {headerDivider && (
<div className="border-b border-lightGrayBorderColor mb-5"></div>
)} */}
<div className="flex justify-between items-center relative">
<div className="flex w-1/5">
<span className={`text-sm font-sansbold ml-4 pt-1 text-productPrice`}>
دانوین
</span>
</div>
<div className="flex items-center relative justify-self-start flex-1">
<div className="hidden lg:flex items-start justify-start flex-1 ">
<a href="#" className={`text-xs text-productPrice mx-3`}>
محصولات
</a>
<a href="#" className={`text-xs text-productPrice mx-3`}>
دسته بندی
</a>
<a href="#" className={`text-xs text-productPrice mx-3`}>
تماس با ما
</a>
<a href="#" className={`text-xs text-productPrice mx-3`}>
درباره ما
</a>
<a href="#" className={`text-xs text-productPrice mx-3`}>
پیگیری
</a>
<a href="#" className={`text-xs text-productPrice mx-3`}>
وبلاگ
</a>
</div>
</div>
<div className="flex justify-end items-center ">
<div className="ml-4">
<Switch />
</div>
<div className="flex flex-row-reverse items-center relative w-60 ml-3">
<img
src={search}
alt=""
className="w-5 h-5 absolute left-3 cursor-pointer"
/>
<input
type="text"
placeholder="جستجو در پنل کاربری..."
className="text-xs rounded pr-4 pl-10 py-2 w-full border border-blue-300 focus:outline-none placeholder:text-blue-300"
/>
</div>
{/* <div class="flex justify- ">
<div class="form-check form-switch">
<input
class="form-check-input appearance-none w-9 -ml-10 rounded-full float-left h-5 align-top bg-white bg-no-repeat bg-contain bg-gray-300 focus:outline-none cursor-pointer shadow-sm"
type="checkbox"
role="switch"
id="flexSwitchCheckChecked"
checked
/>
</div>
</div> */}
{/* <p className={`text-xs ml-2 text-product>Price`}>
140,000
<span className={`text-xs font-light text-productPrice`}>
تومان
</span>
</p> */}
{/* <img src={whiteCartIcon} alt="" className="w-5 h-5 ml-2" /> */}
{/* <img src={searchIcon} alt="" className="w-7 h-5 ml-2" /> */}
<img src={cartIcon} alt="" className="w-7 h-5 ml-2" />
{/* <img src={profileIcon} alt="" className="w-5 h-5" /> */}
{/* <button
className={`ml-2 text-xs font-light border rounded-md py-2 px-8 bg-white border-darkCrimsonBorderColor text-productPrice`}
>
ورود
</button> */}
<div className="flex flex-row items-center">
<div className=" flex-col flex-1 mr-3">
<p className="text-blue-900 text-sm">{username}</p>
<p className="text-blue-700 text-xs">{userJob}</p>
</div>
<img src={downwardArrow} alt="" className="w-4 cursor-pointer" />
<img src={profilePic} alt="" className="w-10 rounded-full" />
</div>
</div>
</div>
</header>
);
};
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 = {
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,
};