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.component";

export function DefaultRatingsExample() {
	const value = 3.2;
	return (
		<div class="p-4 border rounded bg-white">
			<div class="flex gap-x-2 items-end">
				<span>{value}</span>
				<Ratings value={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.component";

export function FiveStarsRatingsExample() {
	return (
		<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.component";
import { COLORS } from "$config/design";

export function CustomIconRatingsExample() {
	return (
		<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.red[500] }}
				icon="heart-3-fill"
                applyDefsId="custom-icon-ratings-example"
			/>
		</div>
	);
}