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

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: "وبلاگ",
},
],
};