44 lines
1.1 KiB
Vue
44 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import type { Duration } from 'date-fns';
|
|
|
|
const props = defineProps<{
|
|
points: number | null | undefined;
|
|
category: string | undefined;
|
|
timeRemaining?: Duration | undefined;
|
|
}>();
|
|
|
|
const timeRemainingFriendly = computed(() => {
|
|
if (typeof props.timeRemaining !== 'undefined') {
|
|
const seconds = props.timeRemaining.seconds ?? 0;
|
|
return `${props.timeRemaining.minutes ?? 0}:${
|
|
seconds >= 0 && seconds < 10 ? 0 : ''
|
|
}${seconds ?? 0}`;
|
|
}
|
|
return null;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="flex flex-row gap-4 *:flex *:items-center *:gap-3 border-b p-4 border-base-300 bg-base-100"
|
|
>
|
|
<div>
|
|
<span class="block">Wartość punktowa</span>
|
|
<div class="info-little-box">
|
|
{{ points }}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span class="block">Aktualna kategoria</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-20 text-center">
|
|
{{ timeRemainingFriendly }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|