import React, { useEffect } from "react";
import {useTranslation } from "react-i18next";
import Button from "./Button";
import robotLogo from "../../assets/images/robot-logo.png";
import { BsNewspaper, BsGithub } from "react-icons/bs";
import Whitepaper from "../../assets/Whitepaper.pdf";
import { MdLanguage } from "react-icons/md";
import { locales, resources } from "../../i18n/i18n";
type Props = {};
const menuItems = [
{
name: "Home",
path: "/",
id: "home",
},
{
name: "About",
path: "",
id: "about",
},
{
name: "Roadmap",
path: "",
id: "roadmap",
},
{
name: "Tokenomics",
path: "",
id: "tokenomics",
},
];
const Header = (props: Props) => {
const [isScrolled, setIsScrolled] = React.useState(false);
const [isOpenMenu, setIsOpenMenu] = React.useState(false);
const [isMobile, setIsMobile] = React.useState(false);
const { i18n } = useTranslation();
const currentLanguage = locales[i18n.language as keyof typeof locales ]
const languages = Object.keys(resources)
console.log(Object.keys(resources));
console.log(currentLanguage);
React.useEffect(() => {
// check is mobile
if (window.innerWidth <= 768) {
setIsMobile(true);
} else {
setIsMobile(false);
}
console.log(window.innerWidth);
if (window.innerWidth <= 1024) {
setIsScrolled(true);
} else {
window.addEventListener("scroll", () => {
if (window.scrollY > 0) {
setIsScrolled(true);
} else {
setIsScrolled(false);
}
});
}
}, [window.innerWidth]);
const jumpToSection = (section: string) => {
console.log("section", section);
const element = document.getElementById(section);
if (element) {
element.scrollIntoView({ behavior: "smooth" });
}
};
const backToHome = () => {
const element = document.getElementById("home");
if (element) {
element.scrollIntoView({ behavior: "smooth" });
}
};
const openLocalPdf = () => {
const pdf = Whitepaper;
window.open(pdf);
};
const changeLanguage = (lng: string)=>{
i18n.changeLanguage(lng)
}
return (
<>
{isScrolled ? (
<div className="fixed w-full z-30 p-4 transition-all duration-150 bg-gray-800">
<div className="container mx-auto flex justify-between items-center ">
<div
className="flex gap-2 items-center cursor-pointer hover:text-orange-400"
onClick={() => backToHome()}
>
<div className="bg-white w-8 rounded-full overflow-hidden p-1 ">
<img
src={robotLogo}
className="w-full transition-all duration-150 rounded-full"
alt=""
/>
</div>
<h4 className="text-xl transition-all duration-150 text-white hover:text-orange-400 uppercase font-bold">
SGPT
</h4>
</div>
{
// Mobile menu
isMobile ? (
<div
className="flex flex-col items-center gap-1 px-2 py-1 cursor-pointer"
onClick={() => setIsOpenMenu(!isOpenMenu)}
>
<div className="w-6 h-1 bg-white rounded-full"></div>
<div className="w-6 h-1 bg-white rounded-full"></div>
<div className="w-6 h-1 bg-white rounded-full"></div>
</div>
) : (
<div className="flex gap-10 items-center">
<ul className="flex gap-10">
{menuItems.map((item) => (
<li
className="inline-block "
key={item.path}
onClick={() => jumpToSection(item.id)}
>
<p className="text-white text-md transition-all duration-150 cursor-pointer transform motion-safe:hover:scale-110 hover:text-orange-500">
{item.name}
</p>
</li>
))}
</ul>
<div className="flex gap-4">
<Button size="sm" onClick={() => openLocalPdf()}>
<div className="flex items-center gap-2 shadow-slate-50 transition-all transform motion-safe:hover:scale-110">
<BsNewspaper />
Whitepaper
</div>
</Button>
<Button size="sm">
<div className="flex items-center gap-2 shadow-slate-50 transform motion-safe:hover:scale-110">
<BsGithub />
Audit
</div>
</Button>
</div>
</div>
)
}
{
// Mobile menu
isMobile && isOpenMenu ? (
<div className="fixed top-12 right-0 py-4 pl-6 pr-10 bg-gray-800 z-40 rounded-xl">
<div className="flex flex-col items-center justify-center h-full">
<ul className="flex flex-col gap-3">
{menuItems.map((item) => (
<li
className="inline-block"
key={item.path}
onClick={() => jumpToSection(item.id)}
>
<p className="text-white text-md transition-all duration-150 cursor-pointer">
{item.name}
</p>
</li>
))}
<li
className="inline-block"
onClick={() => openLocalPdf()}
>
<p className="text-white text-md transition-all duration-150 cursor-pointer">
Whitepaper
</p>
</li>
<li className="inline-block">
<p className="text-white text-md transition-all duration-150 cursor-pointer">
Audit
</p>
</li>
</ul>
</div>
</div>
) : null
}
</div>
</div>
) : (
<div className="fixed z-30 w-full p-5 transition-all duration-150">
<div className="container mx-auto flex justify-between items-center">
<div className="flex gap-2 items-center">
<div className="bg-white w-12 rounded-full overflow-hidden p-1">
<img
src={robotLogo}
className="w-full transition-all duration-150 rounded-full"
alt=""
/>
</div>
<h4 className="text-4xl transition-all duration-150 text-white uppercase font-bold">
SGPT
</h4>
</div>
<div className="flex text-white items-center gap-x-2 cursor-pointer group relative" >
<MdLanguage className="text-[24px]" />
<span className="group-hover:text-orange-400">{currentLanguage}</span>
<div className=" h-40 w-[140px] absolute top-3"></div>
<ul className="hidden group-hover:flex animate-show-list-language absolute top-10 flex-col gap-y-4 ">
{languages.map((lng)=>(
<>
<li className="lng-item relative group/lng-item w-fit hover:text-orange-400 animate-show" onClick={()=>changeLanguage(lng)}>
{locales[lng as keyof typeof locales]}
<div className="absolute bottom-0 bg-white h-[1px] w-0 animate-show group-hover/lng-item:w-full group-hover/lng-item:bg-orange-400"></div>
</li>
</>
))}
</ul>
</div>
<div className="flex gap-10 items-center">
<ul className="flex gap-10">
{menuItems.map((item) => (
<li
className="inline-block "
key={item.path}
onClick={() => jumpToSection(item.id)}
>
<p className="text-white text-md transition-all duration-150 cursor-pointer hover:text-orange-400">
{item.name}
</p>
</li>
))}
</ul>
<div className="flex gap-4">
<Button size="md" onClick={() => openLocalPdf()}>
<div className="flex items-center gap-2">
<BsNewspaper />
Whitepaper
</div>
</Button>
<Button size="md">
<div className="flex items-center gap-2">
<BsGithub />
Audit
</div>
</Button>
</div>
</div>
</div>
</div>
)}
</>
);
};
export default Header;