← back to ClawCoder

src/components/ui/grade-badge.tsx

37 lines

'use client'

interface GradeBadgeProps {
  grade: string
  percentage: number
}

function gradeColor(grade: string): string {
  const letter = grade.charAt(0).toUpperCase()
  if (letter === 'A' || letter === 'B') return 'text-green-600'
  if (letter === 'C') return 'text-yellow-600'
  return 'text-red-600'
}

function gradeBgColor(grade: string): string {
  const letter = grade.charAt(0).toUpperCase()
  if (letter === 'A' || letter === 'B') return 'bg-green-50 ring-green-200'
  if (letter === 'C') return 'bg-yellow-50 ring-yellow-200'
  return 'bg-red-50 ring-red-200'
}

export function GradeBadge({ grade, percentage }: GradeBadgeProps) {
  return (
    <div
      className={`inline-flex flex-col items-center justify-center rounded-2xl p-6 ring-1 ${gradeBgColor(grade)}`}
      aria-label={`Grade: ${grade}, Score: ${percentage}%`}
    >
      <span className={`text-5xl font-bold ${gradeColor(grade)}`}>
        {grade}
      </span>
      <span className="mt-1 text-lg font-medium text-slate-600">
        {percentage}%
      </span>
    </div>
  )
}