import CodeRender from '../../CodeRender'

### Rating

<CodeRender code={`
<div class="rating">
  <input type="radio" name="rating-1" class="mask mask-star" />
  <input type="radio" name="rating-1" class="mask mask-star" checked="" />
  <input type="radio" name="rating-1" class="mask mask-star" />
  <input type="radio" name="rating-1" class="mask mask-star" />
  <input type="radio" name="rating-1" class="mask mask-star" />
</div>

`} />
  
```html
<div class="rating">
  <input type="radio" name="rating-1" class="mask mask-star" />
  <input type="radio" name="rating-1" class="mask mask-star" checked="" />
  <input type="radio" name="rating-1" class="mask mask-star" />
  <input type="radio" name="rating-1" class="mask mask-star" />
  <input type="radio" name="rating-1" class="mask mask-star" />
</div>

```
### mask-star-2 with warning color

<CodeRender code={`
<div class="rating">
  <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
  <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked="" />
  <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
  <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
  <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
</div>

`} />
  
```html
<div class="rating">
  <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
  <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked="" />
  <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
  <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
  <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
</div>

```
### mask-heart with multiple colors

<CodeRender code={`
<div class="gap-1 rating">
  <input type="radio" name="rating-3" class="mask mask-heart bg-red-400" />
  <input type="radio" name="rating-3" class="mask mask-heart bg-orange-400" checked="" />
  <input type="radio" name="rating-3" class="mask mask-heart bg-yellow-400" />
  <input type="radio" name="rating-3" class="mask mask-heart bg-lime-400" />
  <input type="radio" name="rating-3" class="mask mask-heart bg-green-400" />
</div>

`} />
  
```html
<div class="gap-1 rating">
  <input type="radio" name="rating-3" class="mask mask-heart bg-red-400" />
  <input type="radio" name="rating-3" class="mask mask-heart bg-orange-400" checked="" />
  <input type="radio" name="rating-3" class="mask mask-heart bg-yellow-400" />
  <input type="radio" name="rating-3" class="mask mask-heart bg-lime-400" />
  <input type="radio" name="rating-3" class="mask mask-heart bg-green-400" />
</div>

```
### mask-star-2 with green-500 color

<CodeRender code={`
<div class="rating">
  <input type="radio" name="rating-4" class="bg-green-500 mask mask-star-2" />
  <input type="radio" name="rating-4" class="bg-green-500 mask mask-star-2" checked="" />
  <input type="radio" name="rating-4" class="bg-green-500 mask mask-star-2" />
  <input type="radio" name="rating-4" class="bg-green-500 mask mask-star-2" />
  <input type="radio" name="rating-4" class="bg-green-500 mask mask-star-2" />
</div>

`} />
  
```html
<div class="rating">
  <input type="radio" name="rating-4" class="bg-green-500 mask mask-star-2" />
  <input type="radio" name="rating-4" class="bg-green-500 mask mask-star-2" checked="" />
  <input type="radio" name="rating-4" class="bg-green-500 mask mask-star-2" />
  <input type="radio" name="rating-4" class="bg-green-500 mask mask-star-2" />
  <input type="radio" name="rating-4" class="bg-green-500 mask mask-star-2" />
</div>

```
### Sizes

<CodeRender code={`
<div class="flex flex-col gap-2 items-center">
  <div class="rating rating-xs">
    <input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" />
    <input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" checked="" />
    <input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" />
    <input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" />
    <input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" />
  </div>
  <div class="rating rating-sm">
    <input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" />
    <input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" checked="" />
    <input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" />
    <input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" />
    <input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" />
  </div>
  <div class="rating rating-md">
    <input type="radio" name="rating-7" class="mask mask-star-2 bg-orange-400" />
    <input type="radio" name="rating-7" class="mask mask-star-2 bg-orange-400" checked="" />
    <input type="radio" name="rating-7" class="mask mask-star-2 bg-orange-400" />
    <input type="radio" name="rating-7" class="mask mask-star-2 bg-orange-400" />
    <input type="radio" name="rating-7" class="mask mask-star-2 bg-orange-400" />
  </div>
  <div class="rating rating-lg">
    <input type="radio" name="rating-8" class="mask mask-star-2 bg-orange-400" />
    <input type="radio" name="rating-8" class="mask mask-star-2 bg-orange-400" checked="" />
    <input type="radio" name="rating-8" class="mask mask-star-2 bg-orange-400" />
    <input type="radio" name="rating-8" class="mask mask-star-2 bg-orange-400" />
    <input type="radio" name="rating-8" class="mask mask-star-2 bg-orange-400" />
  </div>
</div>

`} />
  
```html
<div class="flex flex-col gap-2 items-center">
  <div class="rating rating-xs">
    <input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" />
    <input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" checked="" />
    <input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" />
    <input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" />
    <input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" />
  </div>
  <div class="rating rating-sm">
    <input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" />
    <input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" checked="" />
    <input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" />
    <input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" />
    <input type="radio" name="rating-6" class="mask mask-star-2 bg-orange-400" />
  </div>
  <div class="rating rating-md">
    <input type="radio" name="rating-7" class="mask mask-star-2 bg-orange-400" />
    <input type="radio" name="rating-7" class="mask mask-star-2 bg-orange-400" checked="" />
    <input type="radio" name="rating-7" class="mask mask-star-2 bg-orange-400" />
    <input type="radio" name="rating-7" class="mask mask-star-2 bg-orange-400" />
    <input type="radio" name="rating-7" class="mask mask-star-2 bg-orange-400" />
  </div>
  <div class="rating rating-lg">
    <input type="radio" name="rating-8" class="mask mask-star-2 bg-orange-400" />
    <input type="radio" name="rating-8" class="mask mask-star-2 bg-orange-400" checked="" />
    <input type="radio" name="rating-8" class="mask mask-star-2 bg-orange-400" />
    <input type="radio" name="rating-8" class="mask mask-star-2 bg-orange-400" />
    <input type="radio" name="rating-8" class="mask mask-star-2 bg-orange-400" />
  </div>
</div>

```
### with `rating-hidden`

<CodeRender code={`
<div class="rating rating-lg">
  <input type="radio" name="rating-9" class="rating-hidden" />
  <input type="radio" name="rating-9" class="mask mask-star-2" />
  <input type="radio" name="rating-9" class="mask mask-star-2" checked="" />
  <input type="radio" name="rating-9" class="mask mask-star-2" />
  <input type="radio" name="rating-9" class="mask mask-star-2" />
  <input type="radio" name="rating-9" class="mask mask-star-2" />
</div>

`} />
  
```html
<div class="rating rating-lg">
  <input type="radio" name="rating-9" class="rating-hidden" />
  <input type="radio" name="rating-9" class="mask mask-star-2" />
  <input type="radio" name="rating-9" class="mask mask-star-2" checked="" />
  <input type="radio" name="rating-9" class="mask mask-star-2" />
  <input type="radio" name="rating-9" class="mask mask-star-2" />
  <input type="radio" name="rating-9" class="mask mask-star-2" />
</div>

```
### half stars

<CodeRender code={`
<div class="rating rating-lg rating-half">
  <input type="radio" name="rating-10" class="rating-hidden" />
  <input type="radio" name="rating-10" class="bg-green-500 mask mask-star-2 mask-half-1" />
  <input type="radio" name="rating-10" class="bg-green-500 mask mask-star-2 mask-half-2" />
  <input
    type="radio"
    name="rating-10"
    class="bg-green-500 mask mask-star-2 mask-half-1"
    checked=""
  />
  <input type="radio" name="rating-10" class="bg-green-500 mask mask-star-2 mask-half-2" />
  <input type="radio" name="rating-10" class="bg-green-500 mask mask-star-2 mask-half-1" />
  <input type="radio" name="rating-10" class="bg-green-500 mask mask-star-2 mask-half-2" />
  <input type="radio" name="rating-10" class="bg-green-500 mask mask-star-2 mask-half-1" />
  <input type="radio" name="rating-10" class="bg-green-500 mask mask-star-2 mask-half-2" />
  <input type="radio" name="rating-10" class="bg-green-500 mask mask-star-2 mask-half-1" />
  <input type="radio" name="rating-10" class="bg-green-500 mask mask-star-2 mask-half-2" />
</div>

`} />
  
```html
<div class="rating rating-lg rating-half">
  <input type="radio" name="rating-10" class="rating-hidden" />
  <input type="radio" name="rating-10" class="bg-green-500 mask mask-star-2 mask-half-1" />
  <input type="radio" name="rating-10" class="bg-green-500 mask mask-star-2 mask-half-2" />
  <input
    type="radio"
    name="rating-10"
    class="bg-green-500 mask mask-star-2 mask-half-1"
    checked=""
  />
  <input type="radio" name="rating-10" class="bg-green-500 mask mask-star-2 mask-half-2" />
  <input type="radio" name="rating-10" class="bg-green-500 mask mask-star-2 mask-half-1" />
  <input type="radio" name="rating-10" class="bg-green-500 mask mask-star-2 mask-half-2" />
  <input type="radio" name="rating-10" class="bg-green-500 mask mask-star-2 mask-half-1" />
  <input type="radio" name="rating-10" class="bg-green-500 mask mask-star-2 mask-half-2" />
  <input type="radio" name="rating-10" class="bg-green-500 mask mask-star-2 mask-half-1" />
  <input type="radio" name="rating-10" class="bg-green-500 mask mask-star-2 mask-half-2" />
</div>

```   

    