77 lines
2.3 KiB
Vue
77 lines
2.3 KiB
Vue
<template>
|
|
<div class="bg-white p-4 rounded-lg shadow-lg hover:shadow-xl transition duration-200 ease-in-out">
|
|
<div class="flex items-center space-x-4">
|
|
<!-- Student Avatar -->
|
|
<div class="w-16 h-16 bg-gray-300 rounded-full flex items-center justify-center text-white font-semibold">
|
|
{{ student.name.charAt(0).toUpperCase() }}
|
|
</div>
|
|
|
|
<!-- Student Info -->
|
|
<div>
|
|
<h3 class="text-xl font-semibold text-gray-800">{{ student.name }}</h3>
|
|
<p class="text-sm text-gray-500">{{ student.email }}</p>
|
|
<p class="text-sm text-gray-500">{{ student.phone }}</p>
|
|
<p class="text-sm text-gray-400">{{ formatDate(student.dob) }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Class Info -->
|
|
<div class="mt-4 flex justify-between">
|
|
<div class="text-sm font-medium text-gray-600">
|
|
Class: {{ student.class.name }} - {{ student.class.section }}
|
|
</div>
|
|
<div
|
|
:class="{
|
|
'bg-green-100 text-green-700': student.attendanceStatus === 'present',
|
|
'bg-red-100 text-red-700': student.attendanceStatus === 'absent',
|
|
}"
|
|
class="px-3 py-1 rounded-full text-xs font-medium"
|
|
>
|
|
{{ capitalize(student.attendanceStatus) }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- View Details Button -->
|
|
<div class="mt-4">
|
|
<NuxtLink
|
|
:to="`/students/${student.id}`"
|
|
class="inline-block px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition"
|
|
>
|
|
View Details
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps } from 'vue'
|
|
|
|
// Props
|
|
const props = defineProps({
|
|
student: Object, // The student object passed down to the component
|
|
})
|
|
|
|
// Format Date (Helper function)
|
|
const formatDate = (date) => {
|
|
const options = { year: 'numeric', month: 'long', day: 'numeric' }
|
|
return new Date(date).toLocaleDateString(undefined, options)
|
|
}
|
|
|
|
// Capitalize Attendance Status
|
|
const capitalize = (text) => {
|
|
return text.charAt(0).toUpperCase() + text.slice(1)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Style the StudentCard for better UI */
|
|
h3 {
|
|
font-weight: bold;
|
|
}
|
|
|
|
div.flex {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
</style>
|
|
|