Ratings

Overview

Ratings, a meaningful way to show how much an item (mostly product from online store) is appreciated…or not.

It is showed very often with stars and average value of reviewers’ ratings.

Examples below show you how you can use AstroPine’s Rating component.

Default Ratings

By default, Ratings displays one star as icon and value props is a integer / float number between 0 and 5.

Under the hood, Ratings turns value in percentage.

3.2

Copied !

---
import Ratings from "$components/ratings/Ratings.astro";

const value = 3.2;
---

<div class="p-4 border rounded bg-white">
  <div class="flex gap-x-2 items-end">
    <span>{value}</span>
    <Ratings {value} applyDefsId="default-ratings-example" />
  </div>
</div>

Number Stars Ratings

By using nb props, number of total ratings icon will be different than 1.

Copied !

---
import Ratings from "$components/ratings/Ratings.astro";
---

<div class="p-4 border rounded bg-white">
  <Ratings
    nb={5}
    size={7}
    value={3.6}
    applyDefsId="five-stars-ratings-example"
  />
</div>

Custom Icon Ratings

The icon props takes an astro component and replace the current one which is StarIcon.

Pay attention to color. By using color props, you can show any color you want. It’s an object with two properties: fill and empty.

Copied !

---
import Ratings from "$components/ratings/Ratings.astro";
import { COLORS } from "$config/design";
---

<div class="p-4 border rounded bg-white">
  <Ratings
    value={2.4}
    nb={3}
    max={3}
    size={12}
    color={{ empty: COLORS.slate[300], fill: COLORS.danger[500] }}
    icon="heart-3-fill"
  />
</div>