Rating

'use client';

import { Rating } from '@akhatmirzo/ui';

export default function RatingBasic() {
  return <Rating defaultValue={4} />;
}

'use client';

import { Rating } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function RatingHalf() {
  const [value, setValue] = useState(3.5);

  return (
    <div className="flex items-center gap-3">
      <Rating value={value} onValueChange={setValue} allowHalf size="lg" />
      <span className="text-sm text-text-muted tabular-nums">{value} / 5</span>
    </div>
  );
}

'use client';

import { Rating } from '@akhatmirzo/ui';

const reviews = [
  { name: 'Dilnoza', rating: 5, text: "Yetkazib berish tez, sifat zo'r." },
  { name: 'Jasur', rating: 3.5, text: "O'lchami biroz katta keldi." },
];

export default function RatingReadOnly() {
  return (
    <ul className="m-0 flex w-full max-w-sm list-none flex-col gap-4 p-0">
      {reviews.map((r) => (
        <li key={r.name} className="flex flex-col gap-1">
          <div className="flex items-center justify-between gap-3">
            <span className="text-sm font-medium text-text">{r.name}</span>
            <Rating value={r.rating} readOnly size="sm" />
          </div>
          <p className="m-0 text-sm text-text-muted">{r.text}</p>
        </li>
      ))}
    </ul>
  );
}

'use client';

import { Rating } from '@akhatmirzo/ui';
import { Heart } from 'lucide-react';

export default function RatingCustom() {
  return (
    <div className="flex flex-col gap-4">
      <Rating
        defaultValue={3}
        color="danger"
        icon={<Heart fill="currentColor" strokeWidth={0} />}
      />
      <Rating defaultValue={2} color="primary" size="sm" />
      <Rating defaultValue={7} max={10} />
      <Rating defaultValue={3} disabled />
    </div>
  );
}

'use client';

import { Field, Rating } from '@akhatmirzo/ui';

export default function RatingWithField() {
  return (
    <Field label="Xizmat sifati" description="1 dan 5 gacha baholang">
      <Rating defaultValue={5} allowClear={false} />
    </Field>
  );
}