nuxt-prawo-jazdy/components/TopBar.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</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>