@ieltsrealtest/ui
Version:
Reusable UI components for IELTS Real Test platform, built with React and TypeScript.
62 lines (59 loc) • 4.37 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import { SlArrowDown } from "react-icons/sl";
import Link from "next/link";
import Image from "next/image";
const DropdownMenu = ({ items, userName, avatar, isDev }) => {
const [hoveredItem, setHoveredItem] = useState(null);
let timeOutId;
const [isNotDesktop, setIsNotDesktop] = useState(false);
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [imgError, setImgError] = useState(false);
useEffect(() => {
const checkIsNotDesktop = () => setIsNotDesktop(window.innerWidth < 1024);
checkIsNotDesktop();
window.addEventListener("resize", checkIsNotDesktop);
// cleanup function
return () => {
window.removeEventListener("resize", checkIsNotDesktop);
};
}, []);
const handleMouseEnter = (item) => {
clearTimeout(timeOutId);
setHoveredItem(item);
};
const handleMouseLeave = () => {
timeOutId = setTimeout(() => {
setHoveredItem(null);
}, 200); // Thời gian trễ 200ms trước khi ẩn dropdown
};
const handleLogout = async () => {
const logoutUrl = isDev ? `https://devapi.youready.net/ielts/user/api/auth/logout/` : `https://api.youready.net/ielts/user/api/auth/logout/`;
await fetch(logoutUrl, {
method: "POST",
credentials: "include", // Đảm bảo gửi cookie
}).then((response) => {
if (response.ok) {
isDev ?
window.location.href =
"https://dev.youready.net/ielts/user/pages/auth/signin"
:
window.location.href =
"https://www.youready.net/ielts/user/pages/auth/signin";
}
else {
}
});
};
return (_jsx("div", { className: "w-full flex items-center justify-end", children: _jsx("ul", { children: _jsxs("li", { onMouseEnter: () => handleMouseEnter("dropdown"), onMouseLeave: handleMouseLeave, className: `relative ${isNotDesktop ? "" : "hover:text-red-600"}`, onClick: () => isNotDesktop && setIsMenuOpen(!isMenuOpen), children: [_jsxs("span", { className: "text-black font-medium inline-flex items-center gap-2 group transition cursor-pointer", "aria-label": userName || "User menu", children: [_jsx(Image, { src: imgError || !avatar ? "https://ieltsrealtest.s3.us-east-1.amazonaws.com/public/user/avatar/avatar.jpg" : avatar, alt: userName || "User avatar", width: 28, height: 28, className: "rounded-full object-cover border border-gray-200", onError: () => setImgError(true) }), _jsx(SlArrowDown, { className: "text-sm" })] }), _jsxs("ul", { className: `absolute top-full -right-1 bg-white shadow-lg mt-2 w-40 z-50 transition-all duration-400 ease-out transform ${hoveredItem === "dropdown"
? "opacity-100 translate-y-3 pointer-events-auto"
: "opacity-0 translate-y-10 pointer-events-none"}
${isNotDesktop
? isMenuOpen
? "block"
: "hidden"
: "hidden lg:block group-hover:block"}
`, children: [items?.map((item, itemIndex) => (_jsxs("li", { className: "group", children: [_jsx(Link, { href: isDev ? `https://dev.youready.net/ielts/user/pages/${item.path}` : `https://www.youready.net/ielts/user/pages/${item.path}`, className: "block px-4 py-2 text-gray-700 cursor-pointer hover:text-[red]", children: item.label }), _jsx("div", { className: "relative w-full h-1 bg-white", children: _jsx("div", { className: "absolute left-0 bottom-0 h-full w-0 bg-[red] transition-all duration-700 ease-in-out group-hover:w-full" }) })] }, itemIndex))), _jsxs("li", { className: "group", children: [_jsx(Link, { onClick: handleLogout, href: "#", className: "block px-4 py-2 text-gray-700 cursor-pointer hover:text-[red]", children: "Logout" }), _jsx("div", { className: "relative w-full h-1 bg-white", children: _jsx("div", { className: "absolute left-0 bottom-0 h-full w-0 bg-[red] transition-all duration-700 ease-in-out group-hover:w-full" }) })] }, "logout")] })] }) }) }));
};
export default DropdownMenu;