|
|
|
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 verticalLineIcon from "../../../assets/icons/dark-crimson-vertical-line.svg";
|
|
|
|
|
|
|
|
const HeaderDesign1 = ({
|
|
|
|
iconHolder,
|
|
|
|
loginBtn,
|
|
|
|
iconProfile,
|
|
|
|
iconCart,
|
|
|
|
iconSearch,
|
|
|
|
}) => {
|
|
|
|
return (
|
|
|
|
<header className="p-4">
|
|
|
|
<div class="container flex justify-between items-center mx-auto py-2 px-8 md:px-14 lg:px-24 w-full bg-white rounded shadow-sm">
|
|
|
|
<div class="text-lg font-bold text-productPrice w-1/5 ">
|
|
|
|
Design System
|
|
|
|
</div>
|
|
|
|
<div class="hidden lg:flex items-center justify-around w-3/5">
|
|
|
|
<a href="#" className="text-productPrice">
|
|
|
|
محصولات
|
|
|
|
</a>
|
|
|
|
<a href="#" className="text-productPrice">
|
|
|
|
دسته بندی
|
|
|
|
</a>
|
|
|
|
<a href="#" className="text-productPrice">
|
|
|
|
تماس با ما
|
|
|
|
</a>
|
|
|
|
<a href="#" className="text-productPrice">
|
|
|
|
درباره ما
|
|
|
|
</a>
|
|
|
|
<a href="#" className="text-productPrice">
|
|
|
|
پیگیری
|
|
|
|
</a>
|
|
|
|
<a href="#" className="text-productPrice">
|
|
|
|
وبلاگ
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
{loginBtn && (
|
|
|
|
<div className="w-1/5 flex justify-end">
|
|
|
|
<button className="ml-2 py-2 px-8 text-productPrice text-sm font-light rounded border border-darkCrimsonBorderColor">
|
|
|
|
ورود
|
|
|
|
</button>
|
|
|
|
{/* <img src={verticalLineIcon} alt="" className="" /> */}
|
|
|
|
<button className="py-2 px-8 text-white text-sm font-light rounded bg-darkCrimsonBgColor">
|
|
|
|
ثبت نام
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
{iconHolder && (
|
|
|
|
<div className="w-1/5 flex justify-end ">
|
|
|
|
{iconCart && (
|
|
|
|
<img src={searchIcon} alt="" className="w-7 h-7 ml-2" />
|
|
|
|
)}
|
|
|
|
{iconSearch && (
|
|
|
|
<img src={cartIcon} alt="" className="w-7 h-7 ml-2" />
|
|
|
|
)}
|
|
|
|
{iconProfile && (
|
|
|
|
<img src={profileIcon} alt="" className="w-7 h-7" />
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</header>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default HeaderDesign1;
|
|
|
|
|
|
|
|
// یک تگ دیو در نظر گرفتم برای 3 تا ایکن سرچ/پروفایل/اضافه کردن به سبد خرید که اینارو انداختم داخل دیو ایکن هولدر
|
|
|
|
|
|
|
|
HeaderDesign1.defaultProps = {
|
|
|
|
loginBtn: true,
|
|
|
|
|
|
|
|
iconHolder: false,
|
|
|
|
iconProfile: false,
|
|
|
|
iconCart: false,
|
|
|
|
iconSearch: false,
|
|
|
|
};
|