|
|
|
import React from "react";
|
|
|
|
|
|
|
|
import cartIcon from "../../../assets/icons/dark-crimson-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 verticalLineIcon from "../../../assets/icons/dark-crimson-vertical-line.svg";
|
|
|
|
|
|
|
|
const HeaderDesign1 = ({
|
|
|
|
iconHolder,
|
|
|
|
loginBtn,
|
|
|
|
iconProfile,
|
|
|
|
iconCart,
|
|
|
|
iconSearch,
|
|
|
|
border,
|
|
|
|
btnRounded,
|
|
|
|
btnPY,
|
|
|
|
btnPX,
|
|
|
|
loginBtnBgColor,
|
|
|
|
loginBorderColor,
|
|
|
|
registerBtnBgColor,
|
|
|
|
loginTextColor,
|
|
|
|
registerTextColor,
|
|
|
|
menuItems,
|
|
|
|
category,
|
|
|
|
searchBox,
|
|
|
|
}) => {
|
|
|
|
return (
|
|
|
|
<header className="container mx-auto py-2 px-8 w-full bg-white rounded shadow-sm">
|
|
|
|
<div className="flex justify-between items-center mb-7">
|
|
|
|
<div className="">
|
|
|
|
<span className="text-xs font-light ml-4 text-productPrice">
|
|
|
|
انتخاب کشور
|
|
|
|
</span>
|
|
|
|
<span className="text-xs font-light text-productPrice">
|
|
|
|
پیگیری سفارش
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div className="">
|
|
|
|
<span className="text-xs font-light text-productPrice">شکایات</span>
|
|
|
|
<span className="text-xs font-light mr-4 text-productPrice">
|
|
|
|
ورود و ثبت نام
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="flex justify-between items-center">
|
|
|
|
<div className="ml-10">
|
|
|
|
<span className="text-sm font-bold text-productPrice ml-4">
|
|
|
|
Design System
|
|
|
|
</span>
|
|
|
|
{category && (
|
|
|
|
<span className="text-sm font-bold text-productPrice ">
|
|
|
|
دسته بندی ها
|
|
|
|
</span>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
{menuItems && (
|
|
|
|
<div
|
|
|
|
className="hidden lg:flex items-center justify-around flex-1"
|
|
|
|
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-row-reverse flex-1 items-center relative"
|
|
|
|
style={{ maxWidth: 800 }}
|
|
|
|
>
|
|
|
|
<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>
|
|
|
|
)}
|
|
|
|
{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 text-productPrice ml-2">
|
|
|
|
140,000
|
|
|
|
<span className="text-xs font-light text-productPrice">
|
|
|
|
تومان
|
|
|
|
</span>
|
|
|
|
</p>
|
|
|
|
{iconCart && <img src={cartIcon} 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>
|
|
|
|
</header>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default HeaderDesign1;
|
|
|
|
|
|
|
|
// یک تگ دیو در نظر گرفتم برای 3 تا ایکن سرچ/پروفایل/اضافه کردن به سبد خرید که اینارو انداختم داخل دیو ایکن هولدر
|
|
|
|
|
|
|
|
HeaderDesign1.defaultProps = {
|
|
|
|
border: "border",
|
|
|
|
loginBorderColor: "border-darkCrimsonBorderColor",
|
|
|
|
btnRounded: "rounded-md",
|
|
|
|
loginBtnBgColor: "bg-white",
|
|
|
|
loginTextColor: "text-productPrice",
|
|
|
|
registerBtnBgColor: "bg-darkCrimsonBgColor",
|
|
|
|
registerTextColor: "text-white",
|
|
|
|
btnPY: "py-2",
|
|
|
|
btnPX: "px-8",
|
|
|
|
|
|
|
|
menuItems: true,
|
|
|
|
category: false,
|
|
|
|
searchBox: false,
|
|
|
|
// icons
|
|
|
|
loginBtn: false,
|
|
|
|
|
|
|
|
iconHolder: true,
|
|
|
|
iconProfile: false,
|
|
|
|
iconCart: true,
|
|
|
|
iconSearch: false,
|
|
|
|
};
|