33 lines
1.3 KiB
TypeScript
33 lines
1.3 KiB
TypeScript
import {User} from "@/interfaces/user";
|
|
import Link from "next/link";
|
|
import {Avatar} from "primereact/avatar";
|
|
import FocusLayer from '@/components/FocusLayer';
|
|
import { preventNavigation } from "@/utils/navigation.disabled";
|
|
|
|
|
|
interface Props {
|
|
user: User;
|
|
navDisabled?: boolean;
|
|
focusMode?: boolean;
|
|
onFocusLayerMouseEnter?: Function;
|
|
}
|
|
|
|
/* eslint-disable @next/next/no-img-element */
|
|
export default function Navbar({user, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
|
|
const disableNavigation = preventNavigation(navDisabled, focusMode);
|
|
|
|
return (
|
|
<header className="w-full bg-transparent py-4 gap-2 flex items-center relative">
|
|
<h1 className="font-bold text-2xl w-1/6 px-8">EnCoach</h1>
|
|
<div className="flex justify-between w-5/6 mr-8">
|
|
<input type="text" placeholder="Search..." className="rounded-full py-4 px-6 border border-mti-gray-platinum outline-none" />
|
|
<Link href={disableNavigation ? "" : "/profile"} className="flex gap-3 items-center justify-end">
|
|
<img src={user.profilePicture} alt={user.name} className="w-10 h-10 rounded-full object-cover" />
|
|
<span className="text-right">{user.name}</span>
|
|
</Link>
|
|
</div>
|
|
{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter}/>}
|
|
</header>
|
|
);
|
|
}
|