|
|
|
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";
|
|
|
|
|
|
|
|
const HeaderDesign1 = ({
|
|
|
|
iconHolder,
|
|
|
|
loginBtn,
|
|
|
|
iconProfile,
|
|
|
|
iconCart,
|
|
|
|
iconSearch,
|
|
|
|
border,
|
|
|
|
btnRounded,
|
|
|
|
btnPY,
|
|
|
|
btnPX,
|
|
|
|
loginBtnBgColor,
|
|
|
|
loginBorderColor,
|
|
|
|
registerBtnBgColor,
|
|
|
|
loginTextColor,
|
|
|
|
registerTextColor,
|
|
|
|
menuItems,
|
|
|
|
category,
|
|
|
|
searchBox,
|
|
|
|
topHeader,
|
|
|
|
bottomHeader,
|
|
|
|
priceHolder,
|
|
|
|
tomanColor,
|
|
|
|
headerBgColor,
|
|
|
|
siteNameTextColor,
|
|
|
|
productCategoryTextColor,
|
|
|
|
menuItemsColor,
|
|
|
|
topHeaderItemsColor,
|
|
|
|
whiteIconCart,
|
|
|
|
whiteIconHamburgerMenu,
|
|
|
|
darkIconHamburgerMenu,
|
|
|
|
}) => {
|
|
|
|
return (
|
|
|
|
<header
|
|
|
|
className={`container mx-auto py-2 px-8 rounded-b-md w-full shadow-sm mb-20 ${headerBgColor}`}
|
|
|
|
>
|
|
|
|
{topHeader && (
|
|
|
|
<div className="flex justify-between items-center mb-2">
|
|
|
|
<div className="">
|
|
|
|
<span className={`text-xs font-light ml-4 ${topHeaderItemsColor}`}>
|
|
|
|
انتخاب کشور
|
|
|
|
</span>
|
|
|
|
<span className={`text-xs font-light ${topHeaderItemsColor}`}>
|
|
|
|
پیگیری سفارش
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div className="">
|
|
|
|
<span className={`text-xs font-light ml-2 ${topHeaderItemsColor}`}>
|
|
|
|
شکایات
|
|
|
|
</span>
|
|
|
|
<span className={`text-xs font-light ${topHeaderItemsColor}`}>
|
|
|
|
ورود و ثبت نام
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
<div className="flex justify-between items-center relative">
|
|
|
|
<div className="ml-10">
|
|
|
|
<span className={`text-sm font-bold ml-4 ${siteNameTextColor}`}>
|
|
|
|
Design System
|
|
|
|
</span>
|
|
|
|
{category && (
|
|
|
|
<span className={`text-sm font-bold ${productCategoryTextColor}`}>
|
|
|
|
دسته بندی ها
|
|
|
|
</span>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
{menuItems && (
|
|
|
|
<div
|
|
|
|
className="hidden lg:flex items-center w-3/5 justify-around flex-1 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
|
|
|
style={{ maxWidth: 700 }}
|
|
|
|
>
|
|
|
|
<a href="#" className="text-productPrice text-xs">
|
|
|
|
محصولات
|
|
|
|
</a>
|
|
|
|
<a href="#" className="text-productPrice text-xs">
|
|
|
|
دسته بندی
|
|
|
|
</a>
|
|
|
|
<a href="#" className="text-productPrice text-xs">
|
|
|
|
تماس با ما
|
|
|
|
</a>
|
|
|
|
<a href="#" className="text-productPrice text-xs">
|
|
|
|
درباره ما
|
|
|
|
</a>
|
|
|
|
<a href="#" className="text-productPrice text-xs">
|
|
|
|
پیگیری
|
|
|
|
</a>
|
|
|
|
<a href="#" className="text-productPrice text-xs">
|
|
|
|
وبلاگ
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
{searchBox && (
|
|
|
|
<div
|
|
|
|
className="flex flex-1 w-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
|
|
|
style={{ maxWidth: 700 }}
|
|
|
|
>
|
|
|
|
<div className="flex flex-row-reverse items-center relative w-full">
|
|
|
|
<img
|
|
|
|
src={lightGraySearchIcon}
|
|
|
|
alt=""
|
|
|
|
className="w-4 h-4 absolute left-3"
|
|
|
|
/>
|
|
|
|
<input
|
|
|
|
type="text"
|
|
|
|
placeholder="نام کالا را جستجو کنید..."
|
|
|
|
className="text-xs rounded-lg pr-4 pl-10 py-2 w-full border border-gray-400"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
{loginBtn && (
|
|
|
|
<div className="flex justify-end mr-7">
|
|
|
|
<button
|
|
|
|
className={`ml-2 text-xs font-light ${border} ${btnRounded} ${btnPY} ${btnPX} ${loginBtnBgColor} ${loginBorderColor} ${loginTextColor}`}
|
|
|
|
>
|
|
|
|
ورود
|
|
|
|
</button>
|
|
|
|
{/* <img src={verticalLineIcon} alt="" className="" /> */}
|
|
|
|
<button
|
|
|
|
className={`ml-2 text-xs font-light ${border} ${btnRounded} ${btnPY} ${btnPX} ${registerBtnBgColor} ${loginBorderColor} ${registerTextColor}`}
|
|
|
|
>
|
|
|
|
ثبت نام
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
{iconHolder && (
|
|
|
|
<div className="w-1/5 flex justify-end items-center ">
|
|
|
|
<p className={`text-xs ml-2 ${priceHolder}`}>
|
|
|
|
140,000
|
|
|
|
<span className={`text-xs font-light ${tomanColor}`}>تومان</span>
|
|
|
|
</p>
|
|
|
|
{iconCart && <img src={cartIcon} alt="" className="w-5 h-5 ml-2" />}
|
|
|
|
{whiteIconCart && (
|
|
|
|
<img src={whiteCartIcon} alt="" className="w-5 h-5 ml-2" />
|
|
|
|
)}
|
|
|
|
{iconSearch && (
|
|
|
|
<img src={searchIcon} alt="" className="w-5 h-5 ml-2" />
|
|
|
|
)}
|
|
|
|
{iconProfile && (
|
|
|
|
<img src={profileIcon} alt="" className="w-5 h-5" />
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
{bottomHeader && (
|
|
|
|
<div className="flex items-center mt-4 relative w-full ">
|
|
|
|
<div className="ml-10 flex items-center">
|
|
|
|
{darkIconHamburgerMenu && (
|
|
|
|
<img src={darkCrimsonHamburgerMenu} alt="" className="w-5 h-5" />
|
|
|
|
)}
|
|
|
|
{whiteIconHamburgerMenu && (
|
|
|
|
<img src={whiteHamburgerMenu} alt="" className="w-3 h-3" />
|
|
|
|
)}
|
|
|
|
<span className={`text-xs mr-2 ${productCategoryTextColor}`}>
|
|
|
|
دسته بندی کالاها
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
className="hidden lg:flex items-center justify-around w-3/5 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
|
|
|
style={{ maxWidth: 700 }}
|
|
|
|
>
|
|
|
|
<a href="#" className={`text-xs ${menuItemsColor}`}>
|
|
|
|
محصولات
|
|
|
|
</a>
|
|
|
|
<a href="#" className={`text-xs ${menuItemsColor}`}>
|
|
|
|
دسته بندی
|
|
|
|
</a>
|
|
|
|
<a href="#" className={`text-xs ${menuItemsColor}`}>
|
|
|
|
تماس با ما
|
|
|
|
</a>
|
|
|
|
<a href="#" className={`text-xs ${menuItemsColor}`}>
|
|
|
|
درباره ما
|
|
|
|
</a>
|
|
|
|
<a href="#" className={`text-xs ${menuItemsColor}`}>
|
|
|
|
پیگیری
|
|
|
|
</a>
|
|
|
|
<a href="#" className={`text-xs ${menuItemsColor}`}>
|
|
|
|
وبلاگ
|
|
|
|
</a>
|
|
|
|
</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 = {
|
|
|
|
headerBgColor: "bg-white",
|
|
|
|
|
|
|
|
siteNameTextColor: "text-productPrice",
|
|
|
|
productCategoryTextColor: "text-productPrice",
|
|
|
|
|
|
|
|
menuItemsColor: "text-productPrice",
|
|
|
|
|
|
|
|
topHeaderItemsColor: "text-productPrice",
|
|
|
|
|
|
|
|
border: "border",
|
|
|
|
btnRounded: "rounded-md",
|
|
|
|
|
|
|
|
loginBorderColor: "border-darkCrimsonBorderColor",
|
|
|
|
loginBtnBgColor: "bg-white",
|
|
|
|
loginTextColor: "text-productPrice",
|
|
|
|
|
|
|
|
registerBtnBgColor: "bg-darkCrimsonBgColor",
|
|
|
|
registerTextColor: "text-white",
|
|
|
|
|
|
|
|
tomanColor: "text-productPrice",
|
|
|
|
priceHolder: "text-productPrice",
|
|
|
|
|
|
|
|
btnPY: "py-2",
|
|
|
|
btnPX: "px-8",
|
|
|
|
|
|
|
|
topHeader: true,
|
|
|
|
bottomHeader: true,
|
|
|
|
|
|
|
|
menuItems: false,
|
|
|
|
category: false,
|
|
|
|
searchBox: true,
|
|
|
|
|
|
|
|
// icons
|
|
|
|
loginBtn: false,
|
|
|
|
|
|
|
|
whiteIconCart: true,
|
|
|
|
darkCrimsonIconCart: false,
|
|
|
|
|
|
|
|
whiteIconHamburgerMenu: false,
|
|
|
|
darkIconHamburgerMenu: true,
|
|
|
|
|
|
|
|
iconHolder: true,
|
|
|
|
iconProfile: false,
|
|
|
|
iconCart: true,
|
|
|
|
iconSearch: false,
|
|
|
|
};
|