62 lines
1.8 KiB
Svelte
62 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
interface Props {
|
|
grade?: string;
|
|
score?: number;
|
|
size?: "inline" | "small" | "medium" | "large";
|
|
}
|
|
|
|
let { grade, score, size = "medium" }: Props = $props();
|
|
|
|
function getGradeColor(grade?: string): string {
|
|
if (!grade) return "#6b7280"; // Gray for no grade
|
|
|
|
const baseLetter = grade.charAt(0).toUpperCase();
|
|
const modifier = grade.length > 1 ? grade.charAt(1) : "";
|
|
|
|
// Gradient from green (A+) to red (F)
|
|
switch (baseLetter) {
|
|
case "A":
|
|
if (modifier === "+") return "#22c55e"; // Bright green
|
|
if (modifier === "-") return "#16a34a"; // Green
|
|
return "#22c55e"; // Green
|
|
case "B":
|
|
if (modifier === "-") return "#65a30d"; // Darker lime
|
|
return "#84cc16"; // Lime
|
|
case "C":
|
|
if (modifier === "-") return "#ca8a04"; // Darker yellow
|
|
return "#eab308"; // Yellow
|
|
case "D":
|
|
return "#f97316"; // Orange
|
|
case "E":
|
|
return "#ea580c"; // Red
|
|
case "F":
|
|
return "#dc2626"; // Red
|
|
default:
|
|
return "#6b7280"; // Gray
|
|
}
|
|
}
|
|
|
|
function getSizeClass(size: "inline" | "small" | "medium" | "large"): string {
|
|
if (size === "inline") return "fw-bold";
|
|
if (size === "small") return "fs-4";
|
|
if (size === "large") return "display-1";
|
|
return "fs-2";
|
|
}
|
|
</script>
|
|
|
|
<strong
|
|
class={getSizeClass(size)}
|
|
style="color: {getGradeColor(grade)}; font-weight: 700;"
|
|
>
|
|
{#if grade}
|
|
{grade}
|
|
{:else}
|
|
{score}%
|
|
{/if}
|
|
</strong>
|
|
|
|
<style>
|
|
strong {
|
|
transition: color 0.3s ease;
|
|
}
|
|
</style>
|