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.
		
		
		
		
		
			
		
			
				
					
					
						
							80 lines
						
					
					
						
							2.3 KiB
						
					
					
				
			
		
		
	
	
							80 lines
						
					
					
						
							2.3 KiB
						
					
					
				| import React from "react"; | |
| import Switch from "../../Switch"; | |
| import Search from "../../SearchDesign/Search"; | |
| 
 | |
| const HeaderDesign2 = ({ username, userJob, menuItems }) => { | |
|   return ( | |
|     <header className="w-full p-4 bg-white shadow-sm"> | |
|       <div className="flex flex-row items-center justify-between"> | |
|         {/* right side */} | |
|         <div className="flex flex-1 flex-row items-center"> | |
|           <span className="text-sm font-sansbold ml-5">دانوین</span> | |
|           <ul class="flex flex-row items-center gap-x-5"> | |
|             {menuItems.map((menuItem, index) => ( | |
|               <li | |
|                 key={index} | |
|                 class="group text-sm p-1 transition ease-in duration-300 transform hover:-translate-y-1 hover:text-[#B24592] cursor-pointer" | |
|               > | |
|                 {menuItem.item} | |
|                 <div class="h-0.5 bg-gradient-to-r from-[#F15F79] to-[#B24592] scale-x-0 group-hover:scale-100 transition-transform origin-right rounded-full duration-700 ease-in-out group"></div> | |
|               </li> | |
|             ))} | |
|           </ul> | |
|         </div> | |
|         {/* left side */}{" "} | |
|         <div className="flex justify-end items-center gap-x-5"> | |
|           <div className=""> | |
|             <Switch /> | |
|           </div> | |
|           <div className="w-fit"> | |
|             <Search /> | |
|           </div> | |
|           <div className="flex flex-row items-center"> | |
|             <div className=" flex-col flex-1"> | |
|               <p className="text-blue-900 text-sm">{username}</p> | |
|               <p className="text-blue-700 text-xs">{userJob}</p> | |
|             </div> | |
|             <img | |
|               src="images/arrow-down.svg" | |
|               alt="arrow" | |
|               className="w-4 cursor-pointer" | |
|             /> | |
|             <img | |
|               src="images/profile-pic.svg" | |
|               alt="profile-pic" | |
|               className="w-10 rounded-full" | |
|             /> | |
|           </div> | |
|         </div> | |
|       </div> | |
|     </header> | |
|   ); | |
| }; | |
| 
 | |
| export default HeaderDesign2; | |
| 
 | |
| HeaderDesign2.defaultProps = { | |
|   username: "رستم پهلوان زاده", | |
|   userJob: "مدیریت سامانه هوشمند", | |
| 
 | |
|   menuItems: [ | |
|     { | |
|       item: "محصولات", | |
|     }, | |
|     { | |
|       item: "دسته بندی", | |
|     }, | |
|     { | |
|       item: "تماس با ما", | |
|     }, | |
|     { | |
|       item: "درباره ما", | |
|     }, | |
|     { | |
|       item: "پیگیری", | |
|     }, | |
|     { | |
|       item: "وبلاگ", | |
|     }, | |
|   ], | |
| };
 | |
| 
 |