Rating

import { Star } from "@mynaui/icons-react";
import { cn } from "@/lib/utils";

function StarIcon({ filled }: { filled?: boolean }) {
  return (
    <Star
      className={cn(
        "size-5 shrink-0",
        filled ? "text-amber-500" : "text-border",
      )}
      fill="currentColor"
    />
  );
}

export default function Basic() {
  return (
    <div className="flex">
      <button
        className="appearance-none"
        type="button"
        aria-label="Star 1 out of 5"
      >
        <StarIcon filled />
      </button>
      <button
        className="appearance-none"
        type="button"
        aria-label="Star 2 out of 5"
      >
        <StarIcon filled />
      </button>
      <button
        className="appearance-none"
        type="button"
        aria-label="Star 3 out of 5"
      >
        <StarIcon filled />
      </button>
      <button
        className="appearance-none"
        type="button"
        aria-label="Star 4 out of 5"
      >
        <StarIcon />
      </button>
      <button
        className="appearance-none"
        type="button"
        aria-label="Star 5 out of 5"
      >
        <StarIcon />
      </button>
    </div>
  );
}

import { Star } from "@mynaui/icons-react";
import { cn } from "@/lib/utils";

function StarIcon({ filled }: { filled?: boolean }) {
  return (
    <Star
      className={cn(
        "size-5 shrink-0",
        filled ? "text-amber-500" : "text-border",
      )}
      fill="currentColor"
    />
  );
}

export default function Disabled() {
  return (
    <div className="flex">
      <button
        className="appearance-none disabled:opacity-50"
        type="button"
        aria-label="Star 1 out of 5"
        disabled
      >
        <StarIcon filled />
      </button>
      <button
        className="appearance-none disabled:opacity-50"
        type="button"
        aria-label="Star 2 out of 5"
        disabled
      >
        <StarIcon filled />
      </button>
      <button
        className="appearance-none disabled:opacity-50"
        type="button"
        aria-label="Star 3 out of 5"
        disabled
      >
        <StarIcon filled />
      </button>
      <button
        className="appearance-none disabled:opacity-50"
        type="button"
        aria-label="Star 4 out of 5"
        disabled
      >
        <StarIcon />
      </button>
      <button
        className="appearance-none disabled:opacity-50"
        type="button"
        aria-label="Star 5 out of 5"
        disabled
      >
        <StarIcon />
      </button>
    </div>
  );
}

import { Star } from "@mynaui/icons-react";
import { cn } from "@/lib/utils";

function StarIcon({ filled, color = "amber" }: { filled?: boolean; color?: "amber" | "gray" | "red" | "green" }) {
  const starColor = {
    amber: "text-amber-500",
    gray: "text-muted-foreground",
    red: "text-red-500",
    green: "text-emerald-500",
  };

  return (
    <button
      className="appearance-none"
      type="button"
      aria-label="Star rating"
    >
      <Star
        className={cn(
          "size-5 shrink-0",
          filled ? starColor[color] : "text-border",
        )}
        fill="currentColor"
      />
    </button>
  );
}

export default function Colors() {
  return (
    <>
      <div className="flex">
        <StarIcon filled />
        <StarIcon filled />
        <StarIcon filled />
        <StarIcon />
        <StarIcon />
      </div>
      <div className="flex">
        <StarIcon color="gray" filled />
        <StarIcon color="gray" filled />
        <StarIcon color="gray" filled />
        <StarIcon color="gray" />
        <StarIcon color="gray" />
      </div>
      <div className="flex">
        <StarIcon color="red" filled />
        <StarIcon color="red" filled />
        <StarIcon color="red" filled />
        <StarIcon color="red" />
        <StarIcon color="red" />
      </div>
      <div className="flex">
        <StarIcon color="green" filled />
        <StarIcon color="green" filled />
        <StarIcon color="green" filled />
        <StarIcon color="green" />
        <StarIcon color="green" />
      </div>
    </>
  );
}

import { Star } from "@mynaui/icons-react";
import { cn } from "@/lib/utils";

function StarIcon({ filled, size = "md" }: { filled?: boolean; size?: "sm" | "md" | "lg" }) {
  const starSize = {
    sm: "size-3",
    md: "size-5",
    lg: "size-8",
  };

  return (
    <button
      className="appearance-none"
      type="button"
      aria-label="Star rating"
    >
      <Star
        className={cn(
          "shrink-0",
          filled ? "text-amber-500" : "text-border",
          starSize[size],
        )}
        fill="currentColor"
      />
    </button>
  );
}

export default function Sizes() {
  return (
    <>
      <div className="flex">
        <StarIcon size="sm" filled />
        <StarIcon size="sm" filled />
        <StarIcon size="sm" filled />
        <StarIcon size="sm" />
        <StarIcon size="sm" />
      </div>
      <div className="flex">
        <StarIcon filled />
        <StarIcon filled />
        <StarIcon filled />
        <StarIcon />
        <StarIcon />
      </div>
      <div className="flex">
        <StarIcon size="lg" filled />
        <StarIcon size="lg" filled />
        <StarIcon size="lg" filled />
        <StarIcon size="lg" />
        <StarIcon size="lg" />
      </div>
    </>
  );
}

import { Star } from "@mynaui/icons-react";
import { cn } from "@/lib/utils";

function StarIcon({ filled }: { filled?: boolean }) {
  return (
    <Star
      className={cn(
        "size-5 shrink-0",
        filled ? "text-amber-500" : "text-border",
      )}
      fill="currentColor"
    />
  );
}

export default function ViewOnly() {
  return (
    <div className="flex">
      <span className="sr-only">4 out of 5 stars</span>
      <StarIcon filled />
      <StarIcon filled />
      <StarIcon filled />
      <StarIcon />
      <StarIcon />
    </div>
  );
}