fastpocket/Frontend/components/Logo.tsx

37 lines
1.0 KiB
TypeScript

import React from "react";
import Icon from "../images/icon.svg";
import Link from "next/link";
import Image from "next/image";
interface LogoProps {
label?: string;
className?: string;
}
function Logo({ label, className }: LogoProps) {
return (
<Link
href={
label !== undefined
? "https://www.youtube.com/channel/UCZzzsJK5koyqUnP4x4oXnqw"
: "/"
}
className={className ?? "" + " flex flex-row items-center justify-center"}
target={label !== undefined ? "_blank" : ""}
>
{/* <Image className="absolute hover:rotate-[360deg] transition duration-1000 ease-in-out" src={logoArrow} alt="Logo"/> */}
<Image priority src={Icon} alt="Follow us on Twitter" width={40} />
{label !== undefined ? (
<span className="invisible absolute left-[50%] top-[-40px] translate-x-[-50%] p-1 rounded-lg font-bold bg-gray-800 text-fuchsia-400 group-hover:visible">
{label}
</span>
) : (
<></>
)}
</Link>
);
}
export default Logo;