Rating

1'use client'
2
3import * as React from 'react'
4
5import { Rating } from '@/components/ui/rating'
6
7export function ControlledRatingExample() {
8    const [value, setValue] = React.useState(2)
9
10    return (
11        <div className="flex flex-col items-center gap-2">
12            <p className="text-md text-black">Controlled Rating: {value}</p>
13            <Rating value={value} onChange={setValue} />
14        </div>
15    )
16}
17

1'use client'
2
3import { Rating } from '@/components/ui/rating'
4
5export function ReadOnlyRatingExample() {
6    return (
7        <div className="flex flex-col gap-4">
8            <div>
9                <p className="text-md mb-1 text-black">Read-only</p>
10                <Rating value={4} readOnly />
11            </div>
12
13            <div>
14                <p className="text-md mb-1 text-black">Disabled</p>
15                <Rating value={3} disabled />
16            </div>
17        </div>
18    )
19}
20

1'use client'
2
3import { Rating } from '@/components/ui/rating'
4
5export function HalfRatingExample() {
6    return (
7        <div className="flex flex-col items-start gap-2">
8            <p className="text-md text-black">Half-star rating</p>
9            <Rating defaultValue={3.5} allowHalf />
10        </div>
11    )
12}
13