diff --git a/app2/src/lib/dashboard/components/Achievement.svelte b/app2/src/lib/dashboard/components/Achievement.svelte index 4f3d272b6f..9b585160cc 100644 --- a/app2/src/lib/dashboard/components/Achievement.svelte +++ b/app2/src/lib/dashboard/components/Achievement.svelte @@ -13,10 +13,17 @@ type Props = { isCurrent?: boolean isNext?: boolean isCompleted?: boolean + isExpired?: boolean } -const { achievement, userAchievements, isCurrent = false, isNext = false, isCompleted = false } = - $props() +const { + achievement, + userAchievements, + isCurrent = false, + isNext = false, + isCompleted = false, + isExpired = false, +} = $props() let showXp = $state(false) @@ -40,19 +47,36 @@ function getStatusColor() { if (completed) { return "text-accent" } + if (isExpired && !completed) { + return "text-red-400" + } if (isNext) { return "text-zinc-400" } return "text-accent" } + +function getContainerClasses() { + let baseClasses = + "flex flex-col gap-3 p-3 rounded-lg transition-all duration-300 cursor-pointer relative w-full text-left" + + if (isExpired && !completed) { + baseClasses += " opacity-60 grayscale" + } + + if (isCurrent) { + baseClasses += " bg-zinc-800/50" + } else { + baseClasses += " hover:bg-zinc-800/30" + } + + return baseClasses +}