You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
397 lines
17 KiB
397 lines
17 KiB
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";
|
|
import { HashLink } from "react-router-hash-link";
|
|
import { Link } from "react-router-dom";
|
|
|
|
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 menuSGPTProducts = [
|
|
{
|
|
name: "SGPT for Healthcare",
|
|
path: "healthcare",
|
|
},
|
|
];
|
|
|
|
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);
|
|
React.useEffect(() => {
|
|
// check is mobile
|
|
if (window.innerWidth <= 1024) {
|
|
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) => {
|
|
const element = document.getElementById(section);
|
|
if (element) {
|
|
element.scrollIntoView({ behavior: "smooth" });
|
|
setIsOpenMenu(!isOpenMenu);
|
|
}
|
|
};
|
|
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 md:gap-2 mx-auto flex justify-between items-center xl:w-[90%] ">
|
|
<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 lg:gap-4 gap-10 items-center">
|
|
<ul className="flex lg:gap-8 ">
|
|
{menuItems.map((item) => (
|
|
<HashLink
|
|
to={`${item.path}#${item.id}`}
|
|
className="flex my-auto item-center"
|
|
>
|
|
<li
|
|
className="flex my-auto item-center"
|
|
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>
|
|
</HashLink>
|
|
))}
|
|
<li className="inline-block group relative">
|
|
<p className="text-white text-md transition-all duration-150 cursor-pointer transform motion-safe:group-hover:scale-110 group-hover:text-orange-500">
|
|
SGPT Products
|
|
</p>
|
|
<div className=" h-10 w-[140px] absolute top-3"></div>
|
|
<ul className="hidden group-hover:flex animate-show-list-language absolute top-10 left-[-8px] flex-col gap-y-4 pt-2 bg-slate-800 w-[200px] min-h-[50px] rounded">
|
|
{menuSGPTProducts.map((item) => (
|
|
<HashLink
|
|
to="/healthcare#firstSection"
|
|
preventScrollReset={false}
|
|
>
|
|
<li
|
|
className="inline-block pl-2 "
|
|
key={item.path}
|
|
>
|
|
<p className="text-white text-md transition-all duration-150 cursor-pointer transform hover:text-orange-500">
|
|
{item.name}
|
|
</p>
|
|
</li>
|
|
</HashLink>
|
|
))}
|
|
</ul>
|
|
</li>
|
|
<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-10 w-[140px] absolute top-3"></div>
|
|
<ul className="hidden group-hover:flex animate-show-list-language absolute top-10 flex-col gap-y-4 bg-slate-800 w-[120px] rounded z-10">
|
|
{languages.map((lng, index) => (
|
|
<>
|
|
<li
|
|
key={lng + index}
|
|
className="lng-item relative group/lng-item w-fit hover:text-orange-400 animate-show pl-2 mr-4 my-2"
|
|
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>
|
|
</ul>
|
|
<div className="flex gap-4 z-20">
|
|
<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 w-[200px] bg-gray-800 z-40 rounded-xl">
|
|
<div className="flex flex-col pl-[20px] h-full">
|
|
<ul className="flex flex-col gap-3 ">
|
|
{menuItems.map((item, index) => (
|
|
<HashLink to={`${item.path}#${item.id}`}>
|
|
<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>
|
|
</HashLink>
|
|
))}
|
|
<li
|
|
className="inline-block"
|
|
onClick={() => (
|
|
openLocalPdf(), setIsOpenMenu(!isOpenMenu)
|
|
)}
|
|
>
|
|
<p className="text-white text-md transition-all duration-150 cursor-pointer hover:text-orange-400">
|
|
Whitepaper
|
|
</p>
|
|
</li>
|
|
<li
|
|
className="inline-block"
|
|
onClick={() => setIsOpenMenu(!isOpenMenu)}
|
|
>
|
|
<p className="text-white text-md transition-all duration-150 cursor-pointer hover:text-orange-400">
|
|
Audit
|
|
</p>
|
|
</li>
|
|
<div className="flex flex-col text-white gap-y-2 cursor-pointer group relative">
|
|
<div className="flex flex-row gap-x-1">
|
|
<span className="group-hover:text-orange-400">
|
|
SGPT Products
|
|
</span>
|
|
</div>
|
|
{/* <div className=" h-40 w-[140px] absolute top-3"></div> */}
|
|
<ul className="hidden group-hover:flex animate-show-list-language flex-col gap-y-4 ">
|
|
{menuSGPTProducts.map((item, index) => (
|
|
<HashLink
|
|
to="/healthcare#firstSection"
|
|
preventScrollReset={false}
|
|
>
|
|
<li
|
|
className="lng-item relative group/lng-item w-fit hover:text-orange-400 animate-show"
|
|
key={index}
|
|
onClick={() => setIsOpenMenu(!isOpenMenu)}
|
|
>
|
|
{item.name}
|
|
<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>
|
|
</HashLink>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div className="flex flex-col text-white gap-y-2 cursor-pointer group relative">
|
|
<div className="flex flex-row gap-x-1">
|
|
<MdLanguage className="text-[24px]" />
|
|
<span className="group-hover:text-orange-400">
|
|
{currentLanguage}
|
|
</span>
|
|
</div>
|
|
{/* <div className=" h-40 w-[140px] absolute top-3"></div> */}
|
|
<ul className="hidden group-hover:flex animate-show-list-language flex-col gap-y-4 ">
|
|
{languages.map((lng, index) => (
|
|
<>
|
|
<li
|
|
className="lng-item relative group/lng-item w-fit hover:text-orange-400 animate-show"
|
|
key={index}
|
|
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>
|
|
</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 xl:w-[90%]">
|
|
<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-3xl transition-all duration-150 text-white uppercase font-bold">
|
|
SGPT
|
|
</h4>
|
|
</div>
|
|
<div className="flex gap-6 items-center">
|
|
<ul className="flex gap-6">
|
|
{menuItems.map((item, index) => (
|
|
<HashLink
|
|
to={`${item.path}#${item.id}`}
|
|
key={item.path + index}
|
|
>
|
|
<li
|
|
className="inline-block "
|
|
onClick={() => jumpToSection(item.id)}
|
|
>
|
|
<p className="text-white text-md transition-all duration-150 cursor-pointer hover:text-orange-400">
|
|
{item.name}
|
|
</p>
|
|
</li>
|
|
</HashLink>
|
|
))}
|
|
<li className="inline-block group relative">
|
|
<p className="text-white text-md transition-all duration-150 cursor-pointer transform group-hover:text-orange-400">
|
|
SGPT Products
|
|
</p>
|
|
<div className=" h-10 w-[140px] absolute top-3"></div>
|
|
<ul className="hidden group-hover:flex animate-show-list-language w-[250px] absolute top-10 flex-col gap-y-4 ">
|
|
{menuSGPTProducts.map((item) => (
|
|
<HashLink
|
|
to="/healthcare#firstSection"
|
|
preventScrollReset={false}
|
|
>
|
|
<li className="inline-block " key={item.path}>
|
|
<p className="text-white text-md transition-all duration-150 cursor-pointer transform hover:text-orange-500">
|
|
{item.name}
|
|
</p>
|
|
</li>
|
|
</HashLink>
|
|
))}
|
|
</ul>
|
|
</li>
|
|
<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-9 w-[140px] absolute top-3"></div>
|
|
<ul className="hidden group-hover:flex animate-show-list-language absolute top-10 flex-col gap-y-4 lg:w-[120px] lg:pb-[12px] z-10 ">
|
|
{languages.map((lng, index) => (
|
|
<>
|
|
<li
|
|
key={index}
|
|
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>
|
|
</ul>
|
|
<div className="flex gap-4">
|
|
<Button size="sm" onClick={() => openLocalPdf()}>
|
|
<div className="flex items-center gap-2">
|
|
<BsNewspaper />
|
|
Whitepaper
|
|
</div>
|
|
</Button>
|
|
<Button size="sm">
|
|
<div className="flex items-center gap-2">
|
|
<BsGithub />
|
|
Audit
|
|
</div>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Header;
|
|
|