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.
 
 
 

271 lines
8.7 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";
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,
headerDivider,
headerDividerColor,
}) => {
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="divide-x flex flex-row-reverse transform translate-x-2"
style={{}}
>
<span className={`text-xs font-light px-2 ${topHeaderItemsColor}`}>
انتخاب کشور
</span>
<span className={`text-xs font-light px-2 ${topHeaderItemsColor}`}>
پیگیری سفارش
</span>
</div>
<div className="divide-x flex flex-row-reverse">
<span className={`text-xs font-light px-2 ${topHeaderItemsColor}`}>
شکایات
</span>
<span className={`text-xs font-light px-2 ${topHeaderItemsColor}`}>
ورود و ثبت نام
</span>
</div>
</div>
)}
{headerDivider && (
<div className="border-b border-lightGrayBorderColor mb-5"></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 font-light text-lightGrayTextColor placeholder-gray-400 focus:outline-none"
/>
</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>
{headerDivider && (
<div className="border-b border-lightGrayBorderColor mt-5"></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",
headerDivider: true,
headerDividerColor: "border-lightGrayBorderColor",
topHeader: true,
bottomHeader: true,
menuItems: false,
category: false,
searchBox: true,
// icons
loginBtn: false,
whiteIconCart: false,
darkCrimsonIconCart: false,
whiteIconHamburgerMenu: false,
darkIconHamburgerMenu: true,
iconHolder: true,
iconProfile: false,
iconCart: true,
iconSearch: false,
};