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.
 
 
 

143 lines
4.8 KiB

import React from "react";
import Search from "../Search";
import cartIcon from "./dark-crimson-cart-icon.svg";
import whiteCartIcon from "./white-cart-icon.svg";
import profileIcon from "./dark-crimson-profile-icon.svg";
import searchIcon from "./dark-crimson-search-box.svg";
import lightGraySearchIcon from "./light-gray-search-box.svg";
import darkCrimsonHamburgerMenu from "./dark-crimson-hamburger-menu.svg";
import whiteHamburgerMenu from "./white-hamburger-menu-icon.svg";
const HeaderDesign1 = ({
loginBtn,
menuItems,
category,
searchBox,
topHeader,
bottomHeader,
productCategoryTextColor,
menuItemsColor,
}) => {
return (
<header className={`rounded-b-md w-full bg-transparent`}>
<>
{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 text-gray-500`}>
انتخاب کشور
</span>
<span className={`text-xs font-light px-2text-gray-500`}>
پیگیری سفارش
</span>
</div>
<div className="">
<span className={`text-xs font-light ml-2text-gray-500`}>
شکایات&nbsp;
</span>
<span className={`text-xs font-lighttext-gray-500`}>
ورود و ثبت نام
</span>
</div>
</div>
)}
<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 text-gray-700`}>
Design System
</span>
{category && (
<span className={`text-sm font-bold ${productCategoryTextColor}`}>
دسته بندی ها
</span>
)}
</div>
<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 }}
>
{menuItems?.map((item, index) => (
<a href="#" className="text-productPrice text-xs" key={index}>
{item}
</a>
))}
</div>
{searchBox && (
<div
className="flex w-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
style={{ maxWidth: 700 }}
>
<Search />
</div>
)}
{loginBtn && (
<div className="flex justify-end mr-7">
<button className={`ml-2 text-xs font-light`}>ورود</button>
{/* <img src={verticalLineIcon} alt="" className="" /> */}
<button className={`ml-2 text-xs font-light`}>ثبت نام</button>
</div>
)}
<div className="w-1/5 flex justify-end items-center ">
<img src={cartIcon} alt="" className="w-5 h-5 ml-2" />
{/* <img src={whiteCartIcon} alt="" className="w-5 h-5 ml-2" /> */}
<img src={searchIcon} alt="" className="w-5 h-5 ml-2" />
<img src={profileIcon} alt="" className="w-5 h-5" />
</div>
</div>
{bottomHeader && (
<>
<div className="border-b border-lightGrayBorderColor mt-5"></div>
<div className="flex items-center mt-4 relative w-full ">
<div className="ml-10 flex items-center">
<img src={darkCrimsonHamburgerMenu} alt="" className="w-5 h-5" />
<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 }}
>
{menuItems.map((item, index) => (
<a href="#" className={`text-xs ${menuItemsColor}`} key={index}>
{item}
</a>
))}
</div>
</div>
</>
)}
</header>
);
};
export default HeaderDesign1;
HeaderDesign1.defaultProps = {
productCategoryTextColor: "text-productPrice",
menuItemsColor: "text-productPrice",
border: "border",
topHeader: true,
bottomHeader: true,
menuItems: [
"محصولات",
"دسته بندی",
"تماس با ما",
"درباره ما",
"پیگیری",
"وبلاگ",
],
category: true,
searchBox: true,
// icons
loginBtn: true,
};