41 lines
1.1 KiB
Vue
41 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import type { Duration } from "date-fns";
|
|
|
|
const props = defineProps<{
|
|
points: number | undefined;
|
|
category: string | undefined;
|
|
timeRemaining?: Duration | undefined;
|
|
}>();
|
|
|
|
const timeRemainingFriendly = computed(() => {
|
|
if (typeof props.timeRemaining !== "undefined") {
|
|
let seconds = props.timeRemaining.seconds ?? 0;
|
|
return `${props.timeRemaining.minutes ?? 0}:${
|
|
seconds >= 0 && seconds < 10 ? 0 : ""
|
|
}${seconds ?? 0}`;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="flex flex-row gap-4 *:flex *:items-center *:gap-3 border-b p-4 border-slate-300 bg-slate-100"
|
|
>
|
|
<div>
|
|
<span class="block">Wartość punktowa</span>
|
|
<div class="info-little-box">
|
|
{{ points }}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span class="block">Aktualna kategoria (implement)</span>
|
|
<div class="info-little-box">{{ category }}</div>
|
|
</div>
|
|
<div v-if="typeof timeRemaining !== 'undefined'">
|
|
<span class="block">Czas do końca egzaminu</span>
|
|
<div class="info-little-box w-18 text-center">
|
|
{{ timeRemainingFriendly }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|