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 darkCrimsonHamburgerMenu from "../../../assets/icons/dark-crimson-hamburger-menu.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, topHeader, bottomHeader, }) => { return ( <header className="container mx-auto py-2 px-8 w-full bg-white rounded shadow-sm"> {topHeader && ( <div className="flex justify-between items-center mb-2"> <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 ml-2 "> شکایات{" "} </span> <span className="text-xs font-light text-productPrice"> ورود و ثبت نام </span> </div> </div> )} <div className="flex justify-between items-center relative"> <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 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 }} > <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-1 w-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2" style={{ maxWidth: 700 }} > <div className="flex flex-row-reverse items-center relative w-full"> <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> </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> {bottomHeader && ( <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" /> <span className="text-xs text-productPrice mr-2"> دسته بندی ها کالاها </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 }} > <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> </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", topHeader: true, bottomHeader: true, menuItems: false, category: false, searchBox: true, // icons loginBtn: false, iconHolder: true, iconProfile: false, iconCart: true, iconSearch: false, };