landing-site/src/components/NavLinks.jsx
2022-11-07 17:12:00 +00:00

23 lines
687 B
JavaScript

import { useState } from 'react'
import Link from 'next/link'
import { AnimatePresence, motion } from 'framer-motion'
export function NavLinks() {
let [hoveredIndex, setHoveredIndex] = useState(null)
return [
['Features', '#features'],
['FAQ', '#faqs'],
].map(([label, href], index) => (
<Link
key={label}
href={href}
className="relative -my-2 -mx-3 rounded-lg px-3 py-2 text-sm text-white transition-colors delay-150 hover:text-gray-900 hover:bg-white hover:delay-[0ms]"
onMouseEnter={() => setHoveredIndex(index)}
onMouseLeave={() => setHoveredIndex(null)}
>
<span className="relative z-10">{label}</span>
</Link>
))
}