parent
ce2016f60c
commit
e2e6869efb
13 changed files with 320 additions and 0 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 |
|
After Width: | Height: | Size: 728 B |
|
After Width: | Height: | Size: 857 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 877 B |
@ -0,0 +1,154 @@ |
||||
import React from "react"; |
||||
|
||||
import Search from "../../SearchDesign/Search"; |
||||
|
||||
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> |
||||
<button className={`ml-2 text-xs font-light`}>ثبت نام</button> |
||||
</div> |
||||
)} |
||||
<div className="w-1/5 flex justify-end items-center "> |
||||
<img |
||||
src="images/dark-crimson-cart-icon.svg" |
||||
alt="" |
||||
className="w-5 h-5 ml-2" |
||||
/> |
||||
<img |
||||
src="images/dark-crimson-search-box.svg" |
||||
alt="" |
||||
className="w-5 h-5 ml-2" |
||||
/> |
||||
<img |
||||
src="images/dark-crimson-profile-icon.svg" |
||||
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="images/dark-crimson-hamburger-menu.svg" |
||||
alt="" |
||||
className="w-5 h-5" |
||||
/> |
||||
<img |
||||
src="images/white-hamburger-menu-icon.svg" |
||||
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, |
||||
}; |
||||
@ -0,0 +1,25 @@ |
||||
import React, { useState } from "react"; |
||||
|
||||
import HeaderDesign1 from "./HeaderDesign1"; |
||||
|
||||
function Navbar() { |
||||
const list = { |
||||
1: <HeaderDesign1 />, |
||||
}; |
||||
const [type, setType] = useState(1); |
||||
return ( |
||||
<div className="w-full flex flex-col items-center"> |
||||
<select |
||||
className="mb-10 w-20 bg-gray-200" |
||||
onChange={(e) => setType(e.target.value)} |
||||
> |
||||
{Object.keys(list).map((option, index) => ( |
||||
<option key={index}>{option}</option> |
||||
))} |
||||
</select> |
||||
{list[type]} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export default Navbar; |
||||
@ -0,0 +1,41 @@ |
||||
import React from "react"; |
||||
import _ from "lodash"; |
||||
|
||||
const langDetector = (lang = "fa", option1, option2) => { |
||||
return lang === "fa" ? option1 : option2; |
||||
}; |
||||
|
||||
export default function Search(props) { |
||||
return ( |
||||
<div className="flex items-center justify-center w-full my-2"> |
||||
<div className="relative text-gray-600 focus-within:text-gray-400 w-full"> |
||||
<span |
||||
className={_.join( |
||||
[ |
||||
"absolute inset-y-0 flex items-center pl-2", |
||||
langDetector(props.lang, "left-0", "right-0"), |
||||
], |
||||
" " |
||||
)} |
||||
> |
||||
<button |
||||
type="submit" |
||||
className="p-1 focus:outline-none focus:shadow-outline" |
||||
> |
||||
<img src="images/search1.png" className="w-6 h-6" alt="" /> |
||||
</button> |
||||
</span> |
||||
<input |
||||
type="search" |
||||
name="q" |
||||
className="w-full py-3 text-sm text-white border rounded-md pr-5 pl-14 outline-none focus:ring-1 focus:text-gray-900 " |
||||
placeholder={_.join( |
||||
[langDetector(props.lang, "جستجو...", "Search...")], |
||||
" " |
||||
)} |
||||
autoComplete="off" |
||||
/> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,25 @@ |
||||
import React, { useState } from "react"; |
||||
|
||||
import Search from "./Search"; |
||||
|
||||
function SearchDesign() { |
||||
const list = { |
||||
1: <Search />, |
||||
}; |
||||
const [type, setType] = useState(1); |
||||
return ( |
||||
<div className="w-full flex flex-col items-center"> |
||||
<select |
||||
className="mb-10 w-20 bg-gray-200" |
||||
onChange={(e) => setType(e.target.value)} |
||||
> |
||||
{Object.keys(list).map((option, index) => ( |
||||
<option key={index}>{option}</option> |
||||
))} |
||||
</select> |
||||
{list[type]} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export default SearchDesign; |
||||
Loading…
Reference in new issue