Rating

import Star from "@/components/ui/star";

export default function Basic() {
  return (
    <div className="flex">
      <Star filled rating={1} />
      <Star filled rating={2} />
      <Star filled rating={3} />
      <Star rating={4} />
      <Star rating={5} />
    </div>
  );
}

import Star from "@/components/ui/star";

export default function Disabled() {
  return (
    <div className="flex">
      <Star disabled filled rating={1} />
      <Star disabled filled rating={2} />
      <Star disabled filled rating={3} />
      <Star disabled rating={4} />
      <Star disabled rating={5} />
    </div>
  );
}

import Star from "@/components/ui/star";

export default function Colors() {
  return (
    <>
      <div className="flex">
        <Star filled rating={1} />
        <Star filled rating={2} />
        <Star filled rating={3} />
        <Star rating={4} />
        <Star rating={5} />
      </div>
      <div className="flex">
        <Star color="gray" filled rating={1} />
        <Star color="gray" filled rating={2} />
        <Star color="gray" filled rating={3} />
        <Star color="gray" rating={4} />
        <Star color="gray" rating={5} />
      </div>
      <div className="flex">
        <Star color="red" filled rating={1} />
        <Star color="red" filled rating={2} />
        <Star color="red" filled rating={3} />
        <Star color="red" rating={4} />
        <Star color="red" rating={5} />
      </div>
      <div className="flex">
        <Star color="green" filled rating={1} />
        <Star color="green" filled rating={2} />
        <Star color="green" filled rating={3} />
        <Star color="green" rating={4} />
        <Star color="green" rating={5} />
      </div>
    </>
  );
}

import Star from "@/components/ui/star";

export default function Sizes() {
  return (
    <>
      <div className="flex">
        <Star size="sm" filled rating={1} />
        <Star size="sm" filled rating={2} />
        <Star size="sm" filled rating={3} />
        <Star size="sm" rating={4} />
        <Star size="sm" rating={5} />
      </div>
      <div className="flex">
        <Star filled rating={1} />
        <Star filled rating={2} />
        <Star filled rating={3} />
        <Star rating={4} />
        <Star rating={5} />
      </div>
      <div className="flex">
        <Star size="lg" filled rating={1} />
        <Star size="lg" filled rating={2} />
        <Star size="lg" filled rating={3} />
        <Star size="lg" rating={4} />
        <Star size="lg" rating={5} />
      </div>
    </>
  );
}

import Star from "@/components/ui/star";

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