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.

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