werefox-cafe/src/info/components/title-card.js

import Image from "next/image";

export default function TitleCard({ theme, card_title }) {
  if (theme == "Ada") {
    return (
      <div className="p-4 w-full rounded-sm ring-4 ring-ada-werefox-cyan-dark dark:ring-ada-werefox-cyan bg-ada-werefox-grey-lightest dark:bg-ada-werefox-grey-dark text-xl text-center text-ada-werefox-cyan-dark dark:text-ada-werefox-cyan">
        <span className="animate-bounce align-middle inline-block w-6 h-6">
          <Image
            src="/emoji/pixel_alexis.png"
            layout="fill"
            objectFit="contain"
            alt="That's me!! Skye!"
          />
        </span>
        {"- "}
        {card_title}
      </div>
    );
  } 
  if (theme == "Skye") {
    return (
      <div className="p-4 w-full rounded-sm ring-4 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink bg-skye-werefox-grey-lightest dark:bg-skye-werefox-grey-dark text-xl text-center text-skye-werefox-pink-dark dark:text-skye-werefox-pink">
        <span className="animate-bounce align-middle inline-block w-6 h-6">
          <Image
            src="/emoji/pixel_alexis.png"
            layout="fill"
            objectFit="contain"
            alt="That's me!! Skye!"
          />
        </span>
        {"- "}
        {card_title}
      </div>
    );
  } else {
    return (
      <div className="p-4 w-full rounded-sm ring-4 ring-alice-werefox-red-dark dark:ring-alice-werefox-red bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark text-xl text-center text-alice-werefox-red-dark dark:text-alice-werefox-red-light">
        <span className="animate-bounce align-middle inline-block w-6 h-6">
          <Image
            src="/emoji/:alice:.png"
            layout="fill"
            objectFit="contain"
            alt="It's Alice in emoji form."
          />
        </span>
        {"- "}
        {card_title}
      </div>
    );
  }
}