'use client'; import * as React from 'react'; import { RiPencilLine, RiStarSmileLine } from '@remixicon/react'; import * as Button from './components/ui/button'; import * as Divider from './components/ui/divider'; import * as LinkButton from './components/ui/link-button'; import { SVGStarFill, SVGStarHalf, SVGStarLine, } from './components/ui/svg-rating-icons'; type RatingData = { ratingCounts: Record; }; const DUMMY_RATING_DATA: RatingData = { ratingCounts: { 5: 8600, 4: 3820, 3: 1300, 2: 2580, 1: 1120, }, }; function calculateRatingStats(data: RatingData) { const totalRatings = Object.values(data.ratingCounts).reduce( (a, b) => a + b, 0, ); const weightedSum = Object.entries(data.ratingCounts).reduce( (sum, [rating, count]) => sum + Number(rating) * count, 0, ); const averageRating = totalRatings > 0 ? Number((weightedSum / totalRatings).toFixed(1)) : 0; const distribution = Object.fromEntries( Object.entries(data.ratingCounts).map(([rating, count]) => [ rating, { count, percentage: (count / totalRatings) * 100, }, ]), ); return { averageRating, totalRatings, distribution }; } function StarRating({ rating }: { rating: number }) { const getStarIcon = (i: number) => { if (rating >= i + 1) { return ; } else if (rating >= i + 0.5) { return ; } return ; }; return (

{Array.from({ length: 5 }, (_, i) => getStarIcon(i))}

); } function RatingBar({ rating, percentage, }: { rating: number; percentage: number; }) { return (

{rating}.0

); } function formatNumber(num: number): string { return num >= 1000 ? `${(num / 1000).toFixed(1)}K` : num.toString(); } export default function BlockRatings() { const stats = React.useMemo( () => calculateRatingStats(DUMMY_RATING_DATA), [], ); const { averageRating, totalRatings, distribution } = stats; return (

Rate Our Product

Provide us with feedback for the product.

{averageRating}

{averageRating} ∙ {formatNumber(totalRatings)} Ratings 567 reviews

{[5, 4, 3, 2, 1].map((rating) => ( ))}

Write a Review

); }