75 lines
3.0 KiB
TypeScript
75 lines
3.0 KiB
TypeScript
import {User} from "@/interfaces/user";
|
|
import Link from "next/link";
|
|
import FocusLayer from "@/components/FocusLayer";
|
|
import {preventNavigation} from "@/utils/navigation.disabled";
|
|
import {useRouter} from "next/router";
|
|
import axios from "axios";
|
|
import {RiLogoutBoxFill} from "react-icons/ri";
|
|
import {BsPower} from "react-icons/bs";
|
|
import clsx from "clsx";
|
|
import moment from "moment";
|
|
|
|
interface Props {
|
|
user: User;
|
|
navDisabled?: boolean;
|
|
focusMode?: boolean;
|
|
onFocusLayerMouseEnter?: () => void;
|
|
}
|
|
|
|
/* eslint-disable @next/next/no-img-element */
|
|
export default function Navbar({user, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
|
|
const disableNavigation = preventNavigation(navDisabled, focusMode);
|
|
const router = useRouter();
|
|
|
|
const expirationDateColor = (date: Date) => {
|
|
const momentDate = moment(date);
|
|
const today = moment(new Date());
|
|
|
|
if (today.add(1, "days").isAfter(momentDate)) return "!bg-mti-red-ultralight border-mti-red-light";
|
|
if (today.add(3, "days").isAfter(momentDate)) return "!bg-mti-rose-ultralight border-mti-rose-light";
|
|
if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
|
|
};
|
|
|
|
const showExpirationDate = () => {
|
|
if (!user.subscriptionExpirationDate) return false;
|
|
|
|
const momentDate = moment(user.subscriptionExpirationDate);
|
|
const today = moment(new Date());
|
|
|
|
return today.add(7, "days").isAfter(momentDate);
|
|
};
|
|
|
|
return (
|
|
<header className="w-full bg-transparent py-4 -lg:justify-between lg:gap-12 flex items-center relative -lg:px-4">
|
|
<Link href={disableNavigation ? "" : "/"} className=" lg:px-8 flex gap-8 items-center">
|
|
<img src="/logo.png" alt="EnCoach's Logo" className="w-12" />
|
|
<h1 className="font-bold text-2xl w-1/6 -lg:hidden">EnCoach</h1>
|
|
</Link>
|
|
<div className="flex justify-end gap-4 lg:w-5/6 lg:mr-8">
|
|
{showExpirationDate() && (
|
|
<Link
|
|
href="https://encoach.com/join"
|
|
data-tip="Expiry date"
|
|
className={clsx(
|
|
"py-2 px-6 w-fit flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
|
|
"transition duration-300 ease-in-out tooltip tooltip-bottom",
|
|
!user.subscriptionExpirationDate
|
|
? "bg-mti-green-ultralight border-mti-green-light"
|
|
: expirationDateColor(user.subscriptionExpirationDate),
|
|
"bg-white border-mti-gray-platinum",
|
|
)}>
|
|
{!user.subscriptionExpirationDate && "Unlimited"}
|
|
{user.subscriptionExpirationDate && moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
|
|
</Link>
|
|
)}
|
|
<Link href={disableNavigation ? "" : "/profile"} className="flex gap-6 items-center justify-end">
|
|
<img src={user.profilePicture} alt={user.name} className="w-10 h-10 rounded-full object-cover" />
|
|
<span className="text-right -lg:hidden">{user.name}</span>
|
|
<BsPower size={40} className="bg-mti-red-light px-2 rounded-full text-white lg:hidden" />
|
|
</Link>
|
|
</div>
|
|
{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
|
|
</header>
|
|
);
|
|
}
|