<script lang="ts" setup> defineProps<{ question: AdvancedQuestion | undefined; }>(); const abc_model = defineModel(); </script> <template> <div class="flex flex-col gap-5 border-t px-4 py-5 border-slate-300 bg-slate-100" > <div class="text-xl">{{ question?.pytanie }}</div> <div> <div class="flex flex-col gap-3"> <input type="radio" name="abc" id="odp_a" v-model="abc_model" value="a" class="hidden" /> <label for="odp_a"> <div :class="`btn btn-primary btn-lg ${ abc_model == 'a' ? ' !btn-secondary' : '' }`" > A </div> <span class="block">{{ question?.odp_a }}</span> </label> <input type="radio" name="abc" id="odp_b" v-model="abc_model" value="b" class="hidden" /> <label for="odp_b"> <div :class="`btn btn-primary btn-lg ${ abc_model == 'b' ? ' !btn-secondary' : '' }`" > B </div> <span class="block">{{ question?.odp_b }}</span> </label> <input type="radio" name="abc" id="odp_c" v-model="abc_model" value="c" class="hidden" /> <label for="odp_c"> <div :class="`btn btn-primary btn-lg ${ abc_model == 'c' ? ' !btn-secondary' : '' }`" > C </div> <span class="block">{{ question?.odp_c }}</span> </label> </div> </div> </div> </template> <style scoped> label { @apply cursor-pointer flex flex-row gap-2 items-center; &:hover { @apply bg-slate-200; } } span { @apply text-lg; } </style>