Rating

"use client";
import { useState } from "react";
import { Rating } from "@/ui/rating";

export function RatingDemo() {
  const [rating, setRating] = useState(2);
  return <Rating value={rating} onChange={setRating} />;
}

import { Rating } from "@/ui/rating";
import { Stack } from "@/ui/stack";
import { rem } from "cretex";
import { SunIcon, MoonStarIcon, MoodCryIcon, MoodSadIcon, MoodSmileIcon, MoodCrazyHappyIcon, MoodHappyIcon } from "@/icons/*";

function getIconStyle(color: string = "#666", size: number = 24) {
  return {
    style: {
      color,
      width: rem(size),
      height: rem(size)
    }
  };
}

const getEmptyIcon = (value: number) => {
  switch (value) {
    case 1:
      return <MoodCryIcon {...getIconStyle()} />;
    case 2:
      return <MoodSadIcon {...getIconStyle()} />;
    case 3:
      return <MoodSmileIcon {...getIconStyle()} />;
    case 4:
      return <MoodHappyIcon {...getIconStyle()} />;
    case 5:
      return <MoodCrazyHappyIcon {...getIconStyle()} />;
    default:
      return null;
  }
};

const getFullIcon = (value: number) => {
  switch (value) {
    case 1:
      return <MoodCryIcon {...getIconStyle("red")} />;
    case 2:
      return <MoodSadIcon {...getIconStyle("orange")} />;
    case 3:
      return <MoodSmileIcon {...getIconStyle("yellow")} />;
    case 4:
      return <MoodHappyIcon {...getIconStyle("lime")} />;
    case 5:
      return <MoodCrazyHappyIcon {...getIconStyle("green")} />;
    default:
      return null;
  }
};

export function RatingCustomSymbolDemo() {
  return (
    <Stack gap={32} align="center" className="m-auto size-full max-w-96">
      <Rating emptySymbol={<MoonStarIcon {...getIconStyle()} />} fullSymbol={<SunIcon {...getIconStyle("#ffd000")} />} />

      <Rating emptySymbol={getEmptyIcon} fullSymbol={getFullIcon} highlightSelectedOnly />
    </Stack>
  );
}

import { Rating } from "@/ui/rating";
import { Stack } from "@/ui/stack";

export function RatingFractionsDemo() {
  return (
    <Stack gap={32} align="center" className="m-auto size-full max-w-96">
      <Rating fractions={2} defaultValue={1.5} />
      <Rating fractions={3} defaultValue={2.33333333} />
      <Rating fractions={4} defaultValue={3.75} />
    </Stack>
  );
}