@ieltsrealtest/ui
Version:
Reusable UI components for IELTS Real Test platform, built with React and TypeScript.
52 lines (49 loc) • 3.5 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";
const DropdownMenu = ({ items, userName }) => {
const [hoveredItem, setHoveredItem] = useState(null);
let timeOutId;
const [isNotDesktop, setIsNotDesktop] = useState(false);
const [isMenuOpen, setIsMenuOpen] = 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 = `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) {
window.location.href =
"https://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-1 group transition cursor-pointer", children: [userName, _jsx(SlArrowDown, { className: "text-sm" })] }), _jsxs("ul", { className: `absolute top-full -right-1 bg-white shadow-lg mt-2 w-40 z-1 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: `https://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;