57 lines
2.4 KiB
TypeScript
57 lines
2.4 KiB
TypeScript
"use client"
|
|
import Image from "next/image";
|
|
import { icons } from "#/assets/icons"
|
|
|
|
import * as React from "react";
|
|
import { DropdownMenu } from "radix-ui";
|
|
import Link from "next/link";
|
|
import Theme from "./theme";
|
|
|
|
export default function AdminHeader() {
|
|
const [open, setOpen] = React.useState(false);
|
|
|
|
return (
|
|
<>
|
|
<nav className="header r-flex-between px-[44px] py-[20px] ">
|
|
<p className="name text-[26px]">Bienvenue, <span>Ken B.</span> </p>
|
|
<div className="r-flex-between justify-center items-center r-gap-12">
|
|
<Theme />
|
|
{/* <ProfilePicture /> */}
|
|
|
|
<button type="button" className="icon-border">
|
|
<Image src={icons.notificationsIcon} alt="Notifications" />
|
|
</button>
|
|
<div className="relative">
|
|
<DropdownMenu.Root open={open} onOpenChange={setOpen}>
|
|
<DropdownMenu.Trigger asChild>
|
|
<div className="r-flex-between justify-center items-center r-gap-12 cursor-pointer ">
|
|
<Image src={icons.profilePicture} alt="ProfilePicture" />
|
|
<button className="IconButton" aria-label="Customise options">
|
|
<Image src={icons.arrowUp} alt="arrowUp" className={`transition-transform duration-300 ${open ? "scale-y-[-1]" : ""}`}/>
|
|
</button>
|
|
</div>
|
|
</DropdownMenu.Trigger>
|
|
|
|
<DropdownMenu.Portal>
|
|
<DropdownMenu.Content className="DropdownMenuContent dropdown-menu r-flex-column r-secondary" sideOffset={0} side="bottom" align="end" >
|
|
<DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px]">
|
|
<Link href="#" className="d-flex items-start ">
|
|
<Image src={icons.userIcon} alt="Profil" />
|
|
Profil
|
|
</Link>
|
|
</DropdownMenu.Item>
|
|
<DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px]">
|
|
<Link href="#" className="d-flex items-start r-danger ">
|
|
<Image src={icons.logoutRed} alt="Deconnexion" />
|
|
Déconnexion
|
|
</Link>
|
|
</DropdownMenu.Item>
|
|
</DropdownMenu.Content>
|
|
</DropdownMenu.Portal>
|
|
</DropdownMenu.Root>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</>
|
|
)
|
|
} |