@ieltsrealtest/ui
Version:
Reusable UI components for IELTS Real Test platform, built with React and TypeScript.
80 lines (79 loc) • 4.03 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { SlArrowDown } from "react-icons/sl";
import { usePathname } from "next/navigation";
const skillPaths = {
LISTENING: "/ielts/listening/",
READING: "/ielts/reading/",
WRITING: "/ielts/writing/",
SPEAKING: "/ielts/speaking/",
};
const subItems = {
LISTENING: [
{ label: "Listening Overview", path: "overview/" },
// { label: 'Listening Tips', path: 'listening/tips/' },
{ label: "Listening Test", path: "" },
],
READING: [
{ label: "Reading Overview", path: "overview/" },
{ label: "Reading Test", path: "" },
],
WRITING: [
{ label: "Writing Overview", path: "writing-overview/" },
{ label: "Writing Test", path: "writing-test-library/" },
],
SPEAKING: [
{ label: "Speaking Overview", path: "speakingTest/" },
{ label: "Speaking Test", path: "" },
],
};
const Navbar = ({ isDev = false }) => {
const pathname = usePathname();
const [hoveredItem, setHoveredItem] = useState(null);
let timeoutId;
const handleMouseEnter = (item) => {
clearTimeout(timeoutId);
setHoveredItem(item);
};
const handleMouseLeave = () => {
timeoutId = setTimeout(() => {
setHoveredItem(null);
}, 200);
};
const isActive = (path) => {
return pathname.includes(path);
};
const getItemClass = (item) => {
if (item === "HOME") {
return pathname.replace(/\/$/, "") === "/ielts"
? "text-red-600"
: "text-black";
}
return isActive(`/${item.toLowerCase()}`) ? "text-red-600" : "text-black";
};
return (_jsx("ul", { className: "flex items-center max-lg:hidden max-xl:space-x-10 space-x-20", children: [
"HOME",
"LISTENING",
"READING",
"WRITING",
"SPEAKING",
"DICTATION",
"BLOG",
].map((item, index) => (_jsxs("li", { onMouseEnter: () => handleMouseEnter(item), onMouseLeave: handleMouseLeave, className: "relative", children: [_jsxs("a", { href: isDev
? `https://dev.youready.net/ielts${item === "HOME"
? "/"
: item === "WRITING"
? "/writing/writing-test-library/"
: `/${item.toLowerCase()}/`}`
: `https://www.youready.net/ielts${item === "HOME"
? ""
: item === "WRITING"
? "/writing/writing-test-library/"
: `/${item.toLowerCase()}/`}`, className: `${getItemClass(item)} inline-flex items-center gap-1 group hover:text-red-600 transition cursor-pointer group-hover:text-red-600`, children: [item, item !== "HOME" && item !== "DICTATION" && item !== "BLOG" && (_jsx(SlArrowDown, { className: "text-sm" }))] }), _jsx("ul", { className: `absolute top-full left-0 bg-white shadow-lg mt-2 w-48 z-50
transition-all duration-400 ease-out transform
${hoveredItem === item
? "opacity-100 translate-y-3 pointer-events-auto"
: "opacity-0 translate-y-10 pointer-events-none"}`, children: subItems[item]?.map((sub, subIndex) => (_jsxs("li", { className: "group", children: [_jsx("a", { href: isDev ? `https://dev.youready.net${skillPaths[item]}${sub.path}` : `https://www.youready.net${skillPaths[item]}${sub.path}`, className: "block px-4 py-2 text-gray-700 cursor-pointer hover:text-[red]", children: sub.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" }) })] }, subIndex))) })] }, index))) }));
};
export default Navbar;