werefox-cafe/src/info/components/contacts-link.js

import Link from "next/link";
import Image from "next/image";

export default function ContactsLink({ src, alt, url, description, url_text }) {
  return (
    <div>
      <Link href={url}>
        <a target="_blank">
          <div className="p-2 md:text-lg sm:text-md text-xs text-center rounded-sm ring-2 ring-werefox-blue-dark dark:ring-werefox-blue hover:ring-werefox-pink-dark dark:hover:ring-werefox-pink text-werefox-blue-dark dark:text-werefox-blue hover:text-werefox-pink-dark dark:hover:text-werefox-pink hover:animate-yip transition">
            <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
              <Image src={src} layout="fill" objectFit="contain" alt={alt} />
            </span>{" "}
            {description}{" "}
            <div className="animate-wiggle inline-flex" target="_blank">
              {url_text}
            </div>
          </div>
        </a>
      </Link>
    </div>
  );
}