generated from phlgr/vite-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 13
/
Rating.tsx
35 lines (33 loc) · 1.05 KB
/
Rating.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import React from 'react';
import styles from './Rating.module.css';
import RatingIcon from '../RatingIcon/RatingIcon';
type RatingProps = { rating: number; maxRating?: number; className?: string };
function Rating({
rating,
maxRating = 5,
className,
}: RatingProps): JSX.Element {
const realRating = rating / 2;
rating = Math.round(realRating * 2) / 2;
return (
<section className={`${styles.rating} ${className}`}>
<p className={styles.ratingValue}>{rating}</p>
<div className={styles.starContainer}>
{Array.from({ length: maxRating }, (_, i) => i + 1).map((value) => {
let starStatus: 'active' | 'inactive' | 'halfActive';
if (value < rating + 1) {
if (rating % 1 === 0 || rating > value) {
starStatus = 'active';
} else {
starStatus = 'halfActive';
}
} else {
starStatus = 'inactive';
}
return <RatingIcon iconState={starStatus} />;
})}
</div>
</section>
);
}
export default Rating;