forked from sashaastiadi/www_mycelium_net
65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
'use client'
|
|
|
|
import { useRef, useState } from 'react'
|
|
import Link from 'next/link'
|
|
import { AnimatePresence, motion } from 'framer-motion'
|
|
|
|
export function NavLinks() {
|
|
let [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
|
|
let timeoutRef = useRef<number | null>(null)
|
|
|
|
return [
|
|
['About', '/#about'],
|
|
['Features', '/#features'],
|
|
['How it Works', '/#howitworks'],
|
|
['Coming Soon', '/#comingsoon'],
|
|
['FAQs', '/#faqs'],
|
|
['Docs', 'https://threefold.info/mycelium_network/docs/'],
|
|
].map(([label, href], index) => (
|
|
<Link
|
|
key={label}
|
|
href={href}
|
|
className="relative -mx-3 -my-2 rounded-lg px-3 py-2 text-sm leading-tight text-gray-700 transition-colors delay-150 hover:text-gray-900 hover:delay-0"
|
|
onMouseEnter={() => {
|
|
if (timeoutRef.current) {
|
|
window.clearTimeout(timeoutRef.current)
|
|
}
|
|
setHoveredIndex(index)
|
|
}}
|
|
onMouseLeave={() => {
|
|
timeoutRef.current = window.setTimeout(() => {
|
|
setHoveredIndex(null)
|
|
}, 50)
|
|
}}
|
|
onClick={(e) => {
|
|
if (href.startsWith('/#')) {
|
|
e.preventDefault();
|
|
const targetId = href.substring(2);
|
|
const targetElement = document.getElementById(targetId);
|
|
if (targetElement) {
|
|
targetElement.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
}
|
|
}}
|
|
target={href.startsWith('http') ? '_blank' : undefined}
|
|
rel={href.startsWith('http') ? 'noopener noreferrer' : undefined}
|
|
>
|
|
<AnimatePresence>
|
|
{hoveredIndex === index && (
|
|
<motion.span
|
|
className="absolute inset-0 rounded-lg bg-gray-100"
|
|
layoutId="hoverBackground"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1, transition: { duration: 0.15 } }}
|
|
exit={{
|
|
opacity: 0,
|
|
transition: { duration: 0.15 },
|
|
}}
|
|
/>
|
|
)}
|
|
</AnimatePresence>
|
|
<span className="relative z-10">{label}</span>
|
|
</Link>
|
|
))
|
|
}
|