Merge branch 'master' of https://git.sitenevis.com/Reza_ashrafi/tailwind-shop-design-system
commit
50fe4e5905
12 changed files with 237 additions and 4 deletions
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1020 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 646 B |
@ -0,0 +1,143 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
import Search from "../Search"; |
||||||
|
|
||||||
|
import cartIcon from "./dark-crimson-cart-icon.svg"; |
||||||
|
import whiteCartIcon from "./white-cart-icon.svg"; |
||||||
|
import profileIcon from "./dark-crimson-profile-icon.svg"; |
||||||
|
import searchIcon from "./dark-crimson-search-box.svg"; |
||||||
|
import lightGraySearchIcon from "./light-gray-search-box.svg"; |
||||||
|
import darkCrimsonHamburgerMenu from "./dark-crimson-hamburger-menu.svg"; |
||||||
|
import whiteHamburgerMenu from "./white-hamburger-menu-icon.svg"; |
||||||
|
|
||||||
|
const HeaderDesign1 = ({ |
||||||
|
loginBtn, |
||||||
|
menuItems, |
||||||
|
category, |
||||||
|
searchBox, |
||||||
|
topHeader, |
||||||
|
bottomHeader, |
||||||
|
productCategoryTextColor, |
||||||
|
menuItemsColor, |
||||||
|
}) => { |
||||||
|
return ( |
||||||
|
<header className={`rounded-b-md w-full bg-transparent`}> |
||||||
|
<> |
||||||
|
{topHeader && ( |
||||||
|
<div className="flex justify-between items-center mb-2"> |
||||||
|
<div |
||||||
|
className="divide-x flex flex-row-reverse transform translate-x-2" |
||||||
|
style={{}} |
||||||
|
> |
||||||
|
<span className={`text-xs font-light px-2 text-gray-500`}> |
||||||
|
انتخاب کشور |
||||||
|
</span> |
||||||
|
<span className={`text-xs font-light px-2text-gray-500`}> |
||||||
|
پیگیری سفارش |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div className=""> |
||||||
|
<span className={`text-xs font-light ml-2text-gray-500`}> |
||||||
|
شکایات |
||||||
|
</span> |
||||||
|
<span className={`text-xs font-lighttext-gray-500`}> |
||||||
|
ورود و ثبت نام |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
<div className="border-b border-lightGrayBorderColor mb-5"></div> |
||||||
|
</> |
||||||
|
<div className="flex justify-between items-center relative"> |
||||||
|
<div className="ml-10"> |
||||||
|
<span className={`text-sm font-bold ml-4 text-gray-700`}> |
||||||
|
Design System |
||||||
|
</span> |
||||||
|
{category && ( |
||||||
|
<span className={`text-sm font-bold ${productCategoryTextColor}`}> |
||||||
|
دسته بندی ها |
||||||
|
</span> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
<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 }} |
||||||
|
> |
||||||
|
{menuItems?.map((item, index) => ( |
||||||
|
<a href="#" className="text-productPrice text-xs" key={index}> |
||||||
|
{item} |
||||||
|
</a> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
{searchBox && ( |
||||||
|
<div |
||||||
|
className="flex w-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2" |
||||||
|
style={{ maxWidth: 700 }} |
||||||
|
> |
||||||
|
<Search /> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
{loginBtn && ( |
||||||
|
<div className="flex justify-end mr-7"> |
||||||
|
<button className={`ml-2 text-xs font-light`}>ورود</button> |
||||||
|
{/* <img src={verticalLineIcon} alt="" className="" /> */} |
||||||
|
<button className={`ml-2 text-xs font-light`}>ثبت نام</button> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
<div className="w-1/5 flex justify-end items-center "> |
||||||
|
<img src={cartIcon} alt="" className="w-5 h-5 ml-2" /> |
||||||
|
{/* <img src={whiteCartIcon} alt="" className="w-5 h-5 ml-2" /> */} |
||||||
|
<img src={searchIcon} alt="" className="w-5 h-5 ml-2" /> |
||||||
|
<img src={profileIcon} alt="" className="w-5 h-5" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
{bottomHeader && ( |
||||||
|
<> |
||||||
|
<div className="border-b border-lightGrayBorderColor mt-5"></div> |
||||||
|
<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" /> |
||||||
|
<img src={whiteHamburgerMenu} alt="" className="w-3 h-3" /> |
||||||
|
<span className={`text-xs mr-2 ${productCategoryTextColor}`}> |
||||||
|
دسته بندی کالاها |
||||||
|
</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 }} |
||||||
|
> |
||||||
|
{menuItems.map((item, index) => ( |
||||||
|
<a href="#" className={`text-xs ${menuItemsColor}`} key={index}> |
||||||
|
{item} |
||||||
|
</a> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
)} |
||||||
|
</header> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default HeaderDesign1; |
||||||
|
|
||||||
|
HeaderDesign1.defaultProps = { |
||||||
|
productCategoryTextColor: "text-productPrice", |
||||||
|
menuItemsColor: "text-productPrice", |
||||||
|
border: "border", |
||||||
|
topHeader: true, |
||||||
|
bottomHeader: true, |
||||||
|
menuItems: [ |
||||||
|
"محصولات", |
||||||
|
"دسته بندی", |
||||||
|
"تماس با ما", |
||||||
|
"درباره ما", |
||||||
|
"پیگیری", |
||||||
|
"وبلاگ", |
||||||
|
], |
||||||
|
category: true, |
||||||
|
searchBox: true, |
||||||
|
// icons
|
||||||
|
loginBtn: true, |
||||||
|
}; |
||||||
|
After Width: | Height: | Size: 728 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 877 B |
Loading…
Reference in new issue