nuxt-prawo-jazdy/components/RightBarResult.vue

58 lines
1.7 KiB
Vue
Raw Normal View History

<script setup lang="ts">
import * as _ from "lodash";
const props = defineProps<{
// result: ResultEndType;
countBasic: number;
countAdvanced: number;
question: BasicQuestion | AdvancedQuestion | undefined;
questionBasic: BasicQuestion | undefined;
questionAdvanced: AdvancedQuestion | undefined;
now: string | null | undefined;
}>();
const isBasic = computed(() => props.now == "basic");
const isAdvanced = computed(() => props.now == "advanced");
</script>
<template>
<div
class="flex flex-col items-center p-4 gap-10 border-l border-slate-300 bg-slate-100"
>
<div>
<button @click="$emit('end-exam')" class="btn-major">
Wróć na stronę główną
</button>
<button @click="$emit('end-exam')" class="btn-major">
Rozpocznij jeszcze raz
</button>
</div>
<div class="flex flex-row gap-6 *:flex-1 w-full">
<button class="text-md text-white bg-blue-400">Pytania podstawowe</button>
<button class="text-md text-white bg-blue-400">
Pytania specjalistyczne
</button>
</div>
<div class="w-full flex justify-center items-center">
<div class="flex flex-row flex-wrap gap-2 items-stretch !w-max">
<div
v-for="num in _.range(1, 21)"
class="p-1 bg-blue-500 text-white w-8 aspect-square text-center"
>
{{ num }}
</div>
</div>
</div>
<div class="flex flex-row gap-6 *:flex-1 w-full">
<button class="text-md text-white bg-blue-400">
Odtwórz film ponownie
</button>
<button class="text-md text-white bg-blue-400">
Pokaż poprawną odpowiedź
</button>
</div>
</div>
</template>
<!-- <style></style> -->