59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
import { StarIcon, ChartBarIcon, ClockIcon } from '@heroicons/react/24/solid';
|
|
|
|
interface CourseStatsProps {
|
|
averageRating?: number;
|
|
numberOfReviews?: number;
|
|
completionRate?: number;
|
|
totalDuration?: number;
|
|
}
|
|
|
|
export const CourseStats = ({
|
|
averageRating,
|
|
numberOfReviews,
|
|
completionRate,
|
|
totalDuration,
|
|
}: CourseStatsProps) => {
|
|
return (
|
|
<div className="grid grid-cols-2 gap-4 p-6 bg-gray-50 ">
|
|
{averageRating !== undefined && (
|
|
<div className="flex items-center gap-2">
|
|
<StarIcon className="h-5 w-5 text-yellow-400" />
|
|
<div>
|
|
<div className="font-semibold text-gray-900 ">
|
|
{averageRating.toFixed(1)}
|
|
</div>
|
|
<div className="text-xs text-gray-500 ">
|
|
{numberOfReviews} reviews
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{completionRate !== undefined && (
|
|
<div className="flex items-center gap-2">
|
|
<ChartBarIcon className="h-5 w-5 text-green-500" />
|
|
<div>
|
|
<div className="font-semibold text-gray-900 ">
|
|
{completionRate}%
|
|
</div>
|
|
<div className="text-xs text-gray-500 ">
|
|
Completion
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{totalDuration !== undefined && (
|
|
<div className="flex items-center gap-2">
|
|
<ClockIcon className="h-5 w-5 text-blue-500" />
|
|
<div>
|
|
<div className="font-semibold text-gray-900 ">
|
|
{Math.floor(totalDuration / 60)}h {totalDuration % 60}m
|
|
</div>
|
|
<div className="text-xs text-gray-500 ">
|
|
Duration
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}; |