mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-08-24 18:03:06 +02:00
Show rating on the discover page
This commit is contained in:
@@ -1,5 +1,6 @@
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { cn } from '../../lib/classname';
|
import { cn } from '../../lib/classname';
|
||||||
|
import { decimalIfNeeded } from '../../lib/number.ts';
|
||||||
|
|
||||||
type RatingProps = {
|
type RatingProps = {
|
||||||
rating?: number;
|
rating?: number;
|
||||||
@@ -40,7 +41,7 @@ export function Rating(props: RatingProps) {
|
|||||||
if (readOnly) {
|
if (readOnly) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
setStars(counter);
|
setStars(counter);
|
||||||
onRatingChange?.(counter);
|
onRatingChange?.(counter);
|
||||||
}}
|
}}
|
||||||
@@ -49,7 +50,12 @@ export function Rating(props: RatingProps) {
|
|||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
{(props.total || 0) > 0 && (
|
{(props.total || 0) > 0 && (
|
||||||
<span className="ml-1.5 text-xs text-gray-400">
|
<span className="ml-1.5 text-xs font-medium text-gray-400">
|
||||||
|
{decimalIfNeeded(Number(props.rating!))}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{(props.total || 0) > 0 && (
|
||||||
|
<span className="ml-1 text-xs text-gray-400">
|
||||||
({Intl.NumberFormat('en-US').format(props.total!)})
|
({Intl.NumberFormat('en-US').format(props.total!)})
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
@@ -5,3 +5,7 @@ export const formatter = Intl.NumberFormat('en-US', {
|
|||||||
export function formatCommaNumber(number: number): string {
|
export function formatCommaNumber(number: number): string {
|
||||||
return formatter.format(number);
|
return formatter.format(number);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function decimalIfNeeded(number: number): string {
|
||||||
|
return number % 1 === 0 ? number.toString() : number.toFixed(1);
|
||||||
|
}
|
||||||
|
Reference in New Issue
Block a user