Function CreatureCard

components/creature-card.tsx:208–383

({
  username,
  stats,
}: CreatureCardProps)

};

export default async function CreatureCard({
  username,
  stats,
}: CreatureCardProps) {
  const usernameLower = username.toLowerCase();
  const githubProfileUrl = `https://github.com/${usernameLower}`;

  const creature = await getCreatureByGithubUsername(usernameLower);

  if (!creature) {
    return (
      <div className="grid w-full place-content-center gap-5 bg-background px-4 text-center">
        <Image
          alt="GitHub Creature 404"
          height={300}
          src={"/github-creature-logo.png"}
          width={300}
        />

        <h1 className="font-bold text-2xl tracking-tight sm:text-4xl">
          Creature not found
        </h1>

        <p className="text-gray-500">
          The creature you are looking for does not exist.
        </p>
        <Link
          href={serializeFormSearchParams("/", { username: usernameLower })}
        >
          <Button variant={"outline"}>Summon it</Button>
        </Link>
      </div>
    );
  }

  const theme = getPowerLevelTheme(creature.powerLevel);
  const emblemTheme = getEmblemTheme(creature.powerLevel);
  const toggleId = `stats-toggle-${usernameLower}`;
  const cardDomId = `creature-card-${usernameLower}`;

  return (
    <div className="flex flex-col items-center dark">
      <div className="flex flex-col sm:flex-row items-start gap-4">
        <input id={toggleId} type="checkbox" className="peer sr-only" />

        <div
          className={cn(
            "relative transition-transform duration-500 ease-out",
            "peer-checked:sm:-translate-x-1",
            "peer-checked:**:data-[state=reveal]:hidden",
            "peer-checked:**:data-[state=hide]:inline",
            "peer-checked:**:data-[slot=arrow]:rotate-180"
          )}
        >
          {stats && (
            <div className="absolute -top-10 right-0 z-10 flex justify-end mr-6">
              <div className="lg:hidden w-full">
                <CreatureStatsDialog triggerText="View stats">