26 lines
1,005 B
TypeScript
26 lines
1,005 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-10 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;
|