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.

124 lines
3.9 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
}) => {
3 years ago
return (
<header className="p-4">
3 years ago
<div className="container flex justify-evenly items-center mx-auto py-2 px-8 md:px-14 lg:px-24 w-full bg-white rounded shadow-sm">
<div className="text-lg font-bold text-productPrice w-1/5 ">
3 years ago
Design System
</div>
3 years ago
{category && (
<div className="text-md text-productPrice">دسته بندی ها</div>
)}
{menuItems && (
<div className="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>
)}
<div className="bg-yellow-400">
<img src={lightGraySearchIcon} alt="" className="w-4 h-4" />
<input
type="text"
placeholder="نام کالا را جستجو کنید..."
className="bg-red-100 text-xs rounded px-8 py-2"
/>
3 years ago
</div>
3 years ago
{loginBtn && (
<div className="w-1/5 flex justify-end">
3 years ago
<button
className={`ml-2 text-sm font-light ${border} ${btnRounded} ${btnPY} ${btnPX} ${loginBtnBgColor} ${loginBorderColor} ${loginTextColor}`}
>
3 years ago
ورود
</button>
{/* <img src={verticalLineIcon} alt="" className="" /> */}
3 years ago
<button
className={`ml-2 text-sm font-light ${border} ${btnRounded} ${btnPY} ${btnPX} ${registerBtnBgColor} ${registerTextColor}`}
>
3 years ago
ثبت نام
</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>
)}
3 years ago
</div>
</header>
);
};
export default HeaderDesign1;
3 years ago
// یک تگ دیو در نظر گرفتم برای 3 تا ایکن سرچ/پروفایل/اضافه کردن به سبد خرید که اینارو انداختم داخل دیو ایکن هولدر
HeaderDesign1.defaultProps = {
3 years ago
border: "border",
loginBorderColor: "border-darkCrimsonBorderColor",
btnRounded: "rounded-sm",
loginBtnBgColor: "bg-white",
loginTextColor: "text-productPrice",
registerBtnBgColor: "bg-darkCrimsonBgColor",
registerTextColor: "text-white",
btnPY: "py-2",
btnPX: "px-8",
menuItems: false,
category: true,
// icons
3 years ago
loginBtn: true,
iconHolder: false,
iconProfile: false,
iconCart: false,
iconSearch: false,
};