Rating

import { Rating } from '@/components/ui/rating'

export default function Example() {
 const [rating, setRating] = useState(3)

 return (
 <>
 {/* Basic rating */}
 <Rating value={rating} onChange={setRating} />

 {/* With label and value display */}
 <Rating
 label="Rate this product"
 value={rating}
 onChange={setRating}
 showValue
 size="lg"
 />

 {/* Half-star rating with hearts */}
 <Rating
 value={rating}
 onChange={setRating}
 allowHalf
 variant="heart"
 />

 {/* Custom colors */}
 <Rating
 value={4}
 showValue
 emptyColor="text-slate-200"
 fillColor="text-success-default"
 hoverColor="text-success-default"
 />

 {/* Read-only display */}
 <Rating value={4.5} readOnly allowHalf />
 </>
 )
}