Rating

import { Rating } from "@medway-ui/core";
import { useState } from "react";
 
function Example() {
  const [rating, setRating] = useState(0);
 
  return (
    <div className="flex flex-col gap-6">
      {/* Controlled example */}
      <div className="flex flex-col gap-2">
        <Rating size="lg" value={rating} onChange={setRating} />
        <span className="text-sm text-gray-foreground-muted">
          Selected: {rating} stars
        </span>
      </div>
 
      {/* Uncontrolled examples */}
      <Rating size="md" onChange={(value) => console.log("Rating:", value)} />
      <Rating size="sm" />
    </div>
  );
}

import { Rating } from "@medway-ui/core";
 
<div className="flex flex-col gap-6">
  <Rating size="lg" value={3.5} readOnly />
  <Rating size="md" value={2.5} readOnly />
  <Rating size="sm" value={4.5} readOnly />
</div>

import { Rating } from "@medway-ui/core";
import { useState } from "react";
 
function Example() {
  const [rating, setRating] = useState(3);
 
  return (
    <div className="flex flex-col gap-6">
      {/* Controlled example */}
      <Rating
        size="lg"
        value={rating}
        onChange={setRating}
        labels={["Poor", "Excellent"]}
      />
 
      {/* Uncontrolled examples */}
      <Rating size="md" labels={["Unsatisfied", "Satisfied"]} />
      <Rating size="sm" labels={["Bad", "Great"]} />
    </div>
  );
}

import { Rating } from "@medway-ui/core";
 
<div className="flex flex-col gap-6">
  <Rating size="lg" value={5} readOnly />
  <Rating size="md" value={3.5} readOnly />
  <Rating size="sm" value={1} readOnly />
</div>

import { Rating } from "@medway-ui/core";
import { useState } from "react";
 
function Example() {
  const [rating, setRating] = useState(5);
 
  return (
    <div className="flex flex-col gap-6">
      {/* Controlled with 10 stars */}
      <Rating size="md" value={rating} onChange={setRating} maxStars={10} />
 
      {/* Uncontrolled with 3 stars */}
      <Rating size="md" maxStars={3} />
    </div>
  );
}