26 lines
No EOL
1,004 B
TypeScript
26 lines
No EOL
1,004 B
TypeScript
'use client';
|
|
import { motion } from "framer-motion"
|
|
import { useState } from "react";
|
|
|
|
const LinkButton = ({text, href, onPress}: {text: string, href: string, onPress?: () => any}) => {
|
|
const [buttonHovered, setButtonHovered] = useState( false );
|
|
const [buttonPressed, setButtonPressed] = useState( false );
|
|
return (
|
|
<div className="mt-3 flex items-center justify-center gap-x-6 lg:justify-start">
|
|
<motion.a
|
|
href={href}
|
|
className="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
|
|
style={{ marginBottom: '40px' }}
|
|
animate={{opacity: buttonHovered ? 0.8 : 1}}
|
|
onMouseEnter={()=>setButtonHovered(true)}
|
|
onMouseLeave={()=>setButtonHovered(false)}
|
|
onClick={()=>{setButtonPressed(true); onPress && onPress();}}
|
|
>
|
|
{text}
|
|
</motion.a>
|
|
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default LinkButton; |