109 lines
3.3 KiB
TypeScript
109 lines
3.3 KiB
TypeScript
import { useState, useEffect, useMemo, memo, useCallback } from "react";
|
|
import logo from "../../assets/logo/SVG-07.svg";
|
|
|
|
const HomePageTopBar = memo(() => {
|
|
const [activeTab, setActiveTab] = useState(0);
|
|
const tabs = useMemo(() => ["تخفیفها", "برترین فروشگاهها", "برای شما"], []);
|
|
|
|
// Scroll to section when tab is clicked
|
|
const scrollToSection = useCallback((sectionId: string) => {
|
|
const section = document.getElementById(sectionId);
|
|
if (section) {
|
|
section.scrollIntoView({ behavior: "smooth" });
|
|
}
|
|
}, []);
|
|
|
|
// Update active tab based on scroll position with throttling
|
|
useEffect(() => {
|
|
let ticking = false;
|
|
const handleScroll = () => {
|
|
if (!ticking) {
|
|
window.requestAnimationFrame(() => {
|
|
const section1 = document.getElementById("section1");
|
|
const section2 = document.getElementById("section2");
|
|
const section3 = document.getElementById("section3");
|
|
|
|
if (section1 && section2 && section3) {
|
|
const scrollPosition = window.scrollY;
|
|
|
|
if (scrollPosition >= section3.offsetTop - 100) {
|
|
setActiveTab(2);
|
|
} else if (scrollPosition >= section2.offsetTop - 100) {
|
|
setActiveTab(1);
|
|
} else {
|
|
setActiveTab(0);
|
|
}
|
|
}
|
|
ticking = false;
|
|
});
|
|
ticking = true;
|
|
}
|
|
};
|
|
|
|
window.addEventListener("scroll", handleScroll, { passive: true });
|
|
return () => window.removeEventListener("scroll", handleScroll);
|
|
}, []);
|
|
|
|
const scrollToTop = useCallback(() => {
|
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
}, []);
|
|
|
|
const handleTabClick = useCallback(
|
|
(index: number) => {
|
|
setActiveTab(index);
|
|
scrollToSection(`section${index + 1}`);
|
|
},
|
|
[scrollToSection]
|
|
);
|
|
|
|
return (
|
|
<div className="flex gap-2 flex-row h-[48px] w-full bg-WHITE items-center px-4 sticky top-0 z-30">
|
|
<div className="flex relative items-center gap-2 justify-center w-full">
|
|
<div
|
|
className="absolute right-0"
|
|
onClick={() => scrollToTop()}
|
|
role="button"
|
|
tabIndex={0}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter" || e.key === " ") {
|
|
scrollToTop();
|
|
}
|
|
}}
|
|
>
|
|
<img src={logo} className="w-8 h-8 object-contain" alt="logo" />
|
|
</div>
|
|
<div className="flex gap-4 justify-center">
|
|
{tabs.map((tab, index) => (
|
|
<div
|
|
key={index}
|
|
onClick={() => handleTabClick(index)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter" || e.key === " ") {
|
|
handleTabClick(index);
|
|
}
|
|
}}
|
|
role="button"
|
|
tabIndex={index}
|
|
className="flex items-center"
|
|
>
|
|
<p
|
|
className={`text-B12 border-b-[2px] transition-all duration-300 ease-in-out py-1 ${
|
|
index === activeTab
|
|
? "text-BLACK border-BLACK font-bold"
|
|
: "text-GRAY border-transparent"
|
|
}`}
|
|
>
|
|
{tab}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
HomePageTopBar.displayName = "HomePageTopBar";
|
|
|
|
export default HomePageTopBar;
|