|
|
|
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-bold 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 ">
|
|
|
|
<Switch />
|
|
|
|
<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,
|
|
|
|
};
|