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.

162 lines
5.1 KiB

3 years ago
import React from "react";
3 years ago
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";
3 years ago
import lightGraySearchIcon from "../../../assets/icons/light-gray-search-box.svg";
3 years ago
import verticalLineIcon from "../../../assets/icons/dark-crimson-vertical-line.svg";
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
}) => {
3 years ago
return (
3 years ago
<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>
)}
3 years ago
</div>
3 years ago
{menuItems && (
3 years ago
<div
className="hidden lg:flex items-center justify-around flex-1"
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
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>
)}
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 ">
<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" />}
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>
</header>
);
};
export default HeaderDesign1;
3 years ago
// یک تگ دیو در نظر گرفتم برای 3 تا ایکن سرچ/پروفایل/اضافه کردن به سبد خرید که اینارو انداختم داخل دیو ایکن هولدر
HeaderDesign1.defaultProps = {
3 years ago
border: "border",
loginBorderColor: "border-darkCrimsonBorderColor",
3 years ago
btnRounded: "rounded-md",
3 years ago
loginBtnBgColor: "bg-white",
loginTextColor: "text-productPrice",
registerBtnBgColor: "bg-darkCrimsonBgColor",
registerTextColor: "text-white",
btnPY: "py-2",
btnPX: "px-8",
3 years ago
menuItems: true,
category: false,
searchBox: false,
3 years ago
// icons
3 years ago
loginBtn: false,
3 years ago
3 years ago
iconHolder: true,
3 years ago
iconProfile: false,
3 years ago
iconCart: true,
3 years ago
iconSearch: false,
};