werefox-cafe/src/info/components/page-button.js

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

export default function PageButton({ title, images, url, extra_classes }) {
  return (
    <div className="p-1">
      <Link href={url}>
        <a
          className={`${extra_classes} p-2 w-full inline-block text-lg 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 focus:text-werefox-pink-dark dark:focus:text-werefox-pink hover:animate-yip transition`}
        >
          {images.map((source) => (
            <span
              key={source}
              className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top"
            >
              <Image
                src={source.src}
                layout="fill"
                objectFit="contain"
                alt={source.alt}
              />
            </span>
          ))}{" "}
          {title}
        </a>
      </Link>
    </div>
  );
}