625c1013da
...css shenanigans: daisyui may have had a breaking change at 5.3.0, it wrecks the ui here, as tailwind forces its own styles over daisyuis overrides, for now staying at ~5.2.5, for good measure also @nuxtjs/tailwindcss stays at ^6.13.2 (6.13.2 in pnpmlock) - this may be, because (but i'm not sure) @nuxtjs/tailwind is tailwind3 and not tailwind4? Nuxt3=>4 migration: also changed nuxtimage settings, as the docs have been fixed, path changes, etc
44 lines
1.2 KiB
Vue
44 lines
1.2 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-none flex-row gap-4 *:flex *:items-center *:gap-3 border-b p-4 border-base-300 bg-base-100"
|
|
>
|
|
<div>
|
|
<span class="block">{{ $t('pointValue') }}</span>
|
|
<div class="info-little-box">
|
|
{{ points }}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span class="block">{{ $t('currentCategory') }}</span>
|
|
<div class="info-little-box">
|
|
{{ category }}
|
|
</div>
|
|
</div>
|
|
<div v-if="typeof timeRemaining !== 'undefined'">
|
|
<span class="block">{{ $t('timeToExamEnd') }}</span>
|
|
<div class="info-little-box w-20 text-center">
|
|
{{ timeRemainingFriendly }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|