nuxt-prawo-jazdy/components/RightBar.vue

<script setup lang="ts">
import "7.css/dist/7.scoped.css";

defineProps<{
  questionaries: BasicQuestion[] | null;
  countBasic: number;
  countAdvanced: number;
  dataBasic: BasicQuestion[] | null;
  dataAdvanced: AdvancedQuestion[] | null;
}>();
</script>

<template>
  <div class="flex flex-col items-center p-4 gap-10">
    <div>
      <button class="btn-major">Zakończ egzamin</button>
    </div>
    <div class="flex flex-row gap-6">
      <div>
        Pytania podstawowe
        <div class="win7">
          <div
            role="progressbar"
            class="animate relative min-h-6"
            aria-valuemin="0"
            :aria-valuemax="dataBasic?.length"
            :aria-valuenow="countBasic + 1"
          >
            <div :class="`w-${countBasic + 1}/${dataBasic?.length}`">
              <div class="absolute top-0 w-full text-center font-semibold">
                {{ countBasic + 1 }} / {{ dataBasic?.length }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        Pytania specjalistyczne
        <div class="win7">
          <div
            role="progressbar"
            class="animate relative min-h-6"
            aria-valuemin="0"
            aria-valuemax="100"
            aria-valuenow="80"
          >
            <div class="w-[60%]">
              <div class="absolute top-0 w-full text-center">
                {{ countAdvanced + 1 }} / {{ dataAdvanced?.length }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      Czas na zapoznanie się z treścią pytania<br />
      Czas na odpowiedź
      <div class="btn-major">START</div>
      <div class="win7">
        <div
          role="progressbar"
          class="animate relative min-h-6"
          aria-valuemin="0"
          aria-valuemax="30"
          aria-valuenow="10"
        >
          <div class="w-[60%]">
            <div class="absolute top-0 w-full text-center font-semibold">
              10 sekund
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <button @click="$emit('next-question')" class="btn-major">
        Następne pytanie
      </button>
    </div>

    <br />

    <div class="max-h-[300px] overflow-y-scroll">{{ questionaries }}</div>
  </div>
</template>