Rating

"use client";

import { Rating } from "@waveinno/ui";
import * as React from "react";

export default function RatingDemo() {
  const [v, setV] = React.useState(4);
  return (
    <div className="grid gap-6 sm:grid-cols-2">
      <div className="flex flex-col items-start gap-3">
        <p className="text-[12px] text-muted">Rate your visit · hover to preview, click again to clear</p>
        <Rating value={v} onValueChange={setV} size="lg" labels={["Poor", "Fair", "Good", "Great", "Excellent"]} />
        <Rating defaultValue={3.5} allowHalf />
        <Rating defaultValue={4} icon="heart" />
      </div>
      <div className="flex flex-col items-start gap-3">
        <p className="text-[12px] text-muted">readOnly · with the count</p>
        <Rating readOnly value={4.6} count={128} allowHalf />
        <Rating readOnly value={3.2} count={46} size="sm" allowHalf />
      </div>
    </div>
  );
}