next-app/app/components/logo.tsx

46 lines
1.9 KiB
TypeScript
Raw Normal View History

2024-06-02 10:43:45 +03:00
'use client';
import { Transition } from "@headlessui/react";
import { motion } from "framer-motion";
2024-06-02 10:43:45 +03:00
import { useState } from "react";
import LinkButton from "./link-button";
2024-06-02 10:43:45 +03:00
const Logo = () => {
2024-06-02 10:43:45 +03:00
const [logoHovered, setLogoHovered] = useState( false );
const [aboutButtonHovered, setAboutButtonHovered] = useState( false );
return (
<div style={{ display:"flex", alignItems: 'center', justifyContent: 'center', marginLeft: "40px", marginRight: "40px"}}>
2024-06-02 10:43:45 +03:00
{/* <Transition
appear={false}
show={true}
enter="transition-opacity duration-75"
enterFrom={logoHovered ? "opacity-100" : "opacity-70"}
enterTo={logoHovered ? "opacity-70" : "opacity-100"}
leave="transition-opacity duration-75"
leaveFrom={logoHovered ? "opacity-70" : "opacity-100"}
leaveTo={logoHovered ? "opacity-100" : "opacity-70"}> */}
<motion.a href="/" style={{ marginBottom: '40px', marginLeft: '40px'}} animate={{opacity: logoHovered ? 0.7 : 1}}
2024-06-02 10:43:45 +03:00
onMouseEnter={()=>setLogoHovered(true)}
onMouseLeave={()=>setLogoHovered(false)}>
<img src="/logo-no-background.png" height="auto" width="400px"/>
</motion.a>
2024-06-02 10:43:45 +03:00
{/* </Transition> */}
2024-06-02 11:58:56 +03:00
<div style={{ marginBottom: '40px', marginRight: '50px' }}></div>
{/* <motion.a
href="/about-us"
className="rounded-md bg-white 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', marginRight: '40px', padding: '10px' }}
animate={{opacity: aboutButtonHovered ? 0.8 : 1}}
onMouseEnter={()=>setAboutButtonHovered(true)}
onMouseLeave={()=>setAboutButtonHovered(false)}
>
About us
</motion.a> */}
<LinkButton text="About us" href="/about-us"/>
</div>
)
}
export default Logo;