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