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.

147 lines
5.3 KiB

3 years ago
import React from "react";
3 years ago
import cartIcon from "../../../assets/icons/dark-crimson-cart-icon.svg";
3 years ago
// import whiteCartIcon from "../../../assets/icons/white-cart-icon.svg";
3 years ago
import profileIcon from "../../../assets/icons/dark-crimson-profile-icon.svg";
3 years ago
// 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 }) => {
3 years ago
return (
3 years ago
<header
3 years ago
className={`mx-auto py-3 px-4 rounded-b-md w-full shadow-sm bg-white`}
3 years ago
>
3 years ago
{/* {headerDivider && (
3 years ago
<div className="border-b border-lightGrayBorderColor mb-5"></div>
3 years ago
)} */}
3 years ago
<div className="flex justify-between items-center relative">
3 years ago
<div className="flex w-1/5">
<span className={`text-sm font-bold ml-4 pt-1 text-productPrice`}>
دانوین
3 years ago
</span>
3 years ago
</div>
3 years ago
<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`}>
3 years ago
محصولات
</a>
3 years ago
<a href="#" className={`text-xs text-productPrice mx-3`}>
3 years ago
دسته بندی
</a>
3 years ago
<a href="#" className={`text-xs text-productPrice mx-3`}>
3 years ago
تماس با ما
</a>
3 years ago
<a href="#" className={`text-xs text-productPrice mx-3`}>
3 years ago
درباره ما
</a>
3 years ago
<a href="#" className={`text-xs text-productPrice mx-3`}>
3 years ago
پیگیری
</a>
3 years ago
<a href="#" className={`text-xs text-productPrice mx-3`}>
3 years ago
وبلاگ
</a>
</div>
3 years ago
</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">
3 years ago
<input
3 years ago
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
3 years ago
/>
</div>
3 years ago
</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`}
3 years ago
>
3 years ago
ورود
3 years ago
</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" />
3 years ago
</div>
</div>
3 years ago
</div>
3 years ago
</header>
);
};
export default HeaderDesign1;
3 years ago
// یک تگ دیو در نظر گرفتم برای 3 تا ایکن سرچ/پروفایل/اضافه کردن به سبد خرید که اینارو انداختم داخل دیو ایکن هولدر
3 years ago
// 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
3 years ago
HeaderDesign1.defaultProps = {
3 years ago
username: "رستم پهلوان زاده",
userJob: "مدیریت سامانه هوشمند",
3 years ago
headerDivider: true,
3 years ago
topHeader: true,
bottomHeader: true,
menuItems: false,
3 years ago
category: false,
3 years ago
searchBox: true,
3 years ago
3 years ago
// icons
3 years ago
loginBtn: true,
3 years ago
3 years ago
whiteIconCart: false,
3 years ago
darkCrimsonIconCart: false,
whiteIconHamburgerMenu: false,
darkIconHamburgerMenu: true,
3 years ago
iconHolder: true,
3 years ago
iconProfile: false,
3 years ago
iconCart: true,
3 years ago
iconSearch: false,
};