Mood notoemoji

mood.tsx

import { cn } from "@/lib/utils";
import { Tooltip } from "@radix-ui/themes";
import React, { memo, useState } from "react";

function MoodEmoji({
  mood,
  selected = false,
  className,
  variant = "default",
  onClick,
}: {
  mood:
    | "happy"
    | "excited"
    | "amazing"
    | "focused"
    | "unhappy"
    | "angry"
    | "tired"
    | "sick"
    | "stressed"
    | "overwhelmed"
    | "unamused"
    | "neutral";
  selected?: boolean;
  className?: string;
  variant?: "default" | "avatar";
  onClick?: () => void;
}): React.ReactElement {
  const emoji = {
    happy: "1f642",
    excited: "1f60d",
    amazing: "1f929",
    focused: "1f9d0",
    unhappy: "1f614",
    angry: "1f621",
    tired: "1f634",
    sick: "1f912",
    stressed: "1f630",
    overwhelmed: "1f92f",
    unamused: "1f612",
    neutral: "1f610",
  }[mood];

  const [hover, setHover] = useState(false);

  return (
    <Tooltip content={mood}>
      <button
        tabIndex={0}
        onFocus={(e: React.FocusEvent) => setHover(true)}
        onBlur={(e: React.FocusEvent) => setHover(false)}
        onMouseEnter={(e: React.MouseEvent) => setHover(true)}
        onMouseLeave={(e: React.MouseEvent) => setHover(false)}
        onClick={onClick}
        className={cn(
          "group text-center",
          variant === "avatar"
            ? "w-5 cursor-none transition-transform duration-200 hover:scale-125"
            : "border-border cursor-pointer rounded border p-2",
          selected
            ? "border-accent ring-accent ring-1 ring-offset-0"
            : variant === "default" &&
                "hover:border-zinc-400 focus:border-zinc-400",
          className
        )}
      >
        <picture>
          {(hover || selected) && (
            <source
              srcSet={`https://fonts.gstatic.com/s/e/notoemoji/latest/${emoji}/512.webp`}
              type="image/webp"
            />
          )}

          <img
            src={`https://fonts.gstatic.com/s/e/notoemoji/latest/${emoji}/emoji.svg`}
            alt={mood}
          />
        </picture>
      </button>
    </Tooltip>
  );
}

export default memo(MoodEmoji);