memorium/components/Rating.tsx

import { IconStar, IconStarFilled } from "@components/icons.tsx";
import { useSignal } from "@preact/signals";
import { useState } from "preact/hooks";

export const SmallRating = (
  { max = 5, rating }: { max?: number; rating: number },
) => {
  return (
    <div
      class="flex gap-1 rounded"
      style={{ filter: "drop-shadow(0px 3px 3px black)" }}
    >
      {Array.from({ length: max }).map((_, i) => {
        return (
          <span>
            {(i + 1) <= rating
              ? <IconStarFilled class="w-3 h-3" />
              : <IconStar class="w-3 h-3" />}
          </span>
        );
      })}
    </div>
  );
};

export const Rating = (
  props: { max?: number; rating: number },
) => {
  const [rating, setRating] = useState(props.rating);
  const [hover, setHover] = useState(0);
  const max = useSignal(props.max || 5);

  return (
    <div
      class="flex items-center gap-2 px-5 rounded-2xl bg-gray-200 z-10"
      style={{ color: "var(--foreground)", background: "var(--background)" }}
    >
      {Array.from({ length: max.value }).map((_, i) => {
        return (
          <span
            class={`cursor-pointer opacity-${
              (i + 1) <= rating ? 100 : (i + 1) <= hover ? 20 : 100
            }`}
            onMouseOver={() => setHover(i + 1)}
            onClick={() => setRating(i + 1)}
          >
            {(i + 1) <= rating || (i + 1) <= hover
              ? <IconStarFilled class="w-4 h-4" />
              : <IconStar class="w-4 h-4" />}
          </span>
        );
      })}
    </div>
  );
};