52 lines
1.4 KiB
Vue
52 lines
1.4 KiB
Vue
<script setup>
|
|
import { Head, router } from '@inertiajs/vue3'
|
|
import AppLayout from '@/Layouts/AppLayout.vue'
|
|
import AppButton from '@/Components/AppButton.vue'
|
|
|
|
defineOptions({ layout: AppLayout })
|
|
|
|
const props = defineProps({
|
|
screening: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
categories: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const handleStartCategory = (categoryId) => {
|
|
router.post('/sessions', {
|
|
category_id: categoryId,
|
|
screening_id: props.screening.id,
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Screening Result" />
|
|
|
|
<div class="max-w-4xl mx-auto px-4 py-8">
|
|
<h1 class="text-3xl font-bold text-white mb-6">Screening Result</h1>
|
|
|
|
<div class="bg-surface/50 rounded-lg p-6 mb-8">
|
|
<p class="text-gray-400 text-center mb-4">Your screening result: Passed</p>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<h2 class="text-2xl font-semibold text-white mb-4">Select a Category</h2>
|
|
<div
|
|
v-for="category in categories"
|
|
:key="category.id"
|
|
class="bg-surface/50 rounded-lg p-4 flex items-center justify-between hover:bg-surface/70 transition-colors"
|
|
>
|
|
<span class="text-white font-medium">{{ category.name }}</span>
|
|
<AppButton size="md" @click="handleStartCategory(category.id)">
|
|
Start
|
|
</AppButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|