55 lines
1.2 KiB
Svelte
55 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import type { Question } from '$lib/pb/all.pb';
|
|
export let q: Question;
|
|
|
|
type Status = 'available' | 'partial' | 'full';
|
|
|
|
let status: Status = 'available';
|
|
let solved = 0;
|
|
$: {
|
|
if (q.part1.completed && q.part2.completed) {
|
|
status = 'full';
|
|
solved = 2;
|
|
} else if (q.part1.completed || q.part2.completed) {
|
|
status = 'partial';
|
|
solved = 1;
|
|
} else {
|
|
status = 'available';
|
|
solved = 0;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<a class={`question h-24 border-2 ${status}`} href={`/dashboard/question/${q.id}`}>
|
|
<span class="title">{q.title} - {solved}/2</span>
|
|
<div class="flex justify-between">
|
|
<span class="points">Points: {q.part1.pointsWorth + q.part2.pointsWorth}</span>
|
|
</div>
|
|
</a>
|
|
|
|
<style lang="postcss">
|
|
.question {
|
|
@apply flex justify-between flex-col p-4 w-full rounded-md shadow-md border-2;
|
|
@apply cursor-pointer transition;
|
|
}
|
|
|
|
.available {
|
|
@apply border-gray-400 hover:bg-gray-100;
|
|
@apply text-gray-600;
|
|
}
|
|
|
|
.partial {
|
|
@apply border-yellow-400 bg-yellow-50 hover:bg-yellow-100;
|
|
@apply text-yellow-700;
|
|
}
|
|
|
|
.full {
|
|
@apply border-green-400 bg-green-50 hover:bg-green-100;
|
|
@apply text-green-700;
|
|
}
|
|
|
|
.title {
|
|
@apply font-bold uppercase;
|
|
}
|
|
</style>
|