152 lines
7.0 KiB
Vue
152 lines
7.0 KiB
Vue
<script setup>
|
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-6 max-w-auto mx-auto">
|
|
<!-- Página: Header principal -->
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Historial Académico</h1>
|
|
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Gestión de grados académicos y certificaciones profesionales</p>
|
|
</div>
|
|
|
|
<div>
|
|
<button class="inline-flex items-center gap-3 bg-[#2563eb] hover:bg-[#1e40af] text-white px-4 py-2 rounded-full shadow-md">
|
|
<GoogleIcon
|
|
class="text-white text-xl"
|
|
name="add"
|
|
/>
|
|
Agregar Registro
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card principal: perfil + secciones -->
|
|
<section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<!-- Perfil -->
|
|
<header class="flex items-start gap-4">
|
|
<div class="flex-shrink-0">
|
|
<div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 dark:bg-primary/10 dark:text-primary-dt">
|
|
<!-- icono usuario -->
|
|
<GoogleIcon
|
|
class="text-black dark:text-primary-dt text-xl"
|
|
name="school"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1">
|
|
<h2 class="text-xl font-semibold text-gray-800 dark:text-primary-dt">María González López</h2>
|
|
<p class="text-sm text-gray-500 mt-1 dark:text-primary-dt/70">Información académica y certificaciones profesionales</p>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Secciones: Grados Académicos -->
|
|
<div class="mt-6">
|
|
<h3 class="text-base font-medium text-gray-800 flex items-center gap-2 dark:text-primary-dt">
|
|
<GoogleIcon
|
|
class="text-black dark:text-primary-dt text-xl"
|
|
name="book"
|
|
/>
|
|
Grados Académicos
|
|
</h3>
|
|
|
|
<div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-2">
|
|
<!-- Item grado -->
|
|
<article class="rounded-lg border border-gray-100 bg-white p-4 relative dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Licenciatura en Ingeniería en Sistemas</h4>
|
|
<p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">Universidad Nacional Autónoma de México</p>
|
|
<p class="text-xs text-gray-400 mt-2 dark:text-primary-dt/70">Año: 2015</p>
|
|
</div>
|
|
|
|
<span class="ml-4 inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-700 dark:bg-primary/10 dark:text-primary-dt">
|
|
Licenciatura
|
|
</span>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="rounded-lg border border-gray-100 bg-white p-4 relative dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Maestría en Ciencias de la Computación</h4>
|
|
<p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">Instituto Tecnológico de Monterrey</p>
|
|
<p class="text-xs text-gray-400 mt-2 dark:text-primary-dt/70">Año: 2018</p>
|
|
</div>
|
|
|
|
<span class="ml-4 inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-700 dark:bg-primary/10 dark:text-primary-dt">
|
|
Maestría
|
|
</span>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Secciones: Certificaciones -->
|
|
<div class="mt-8">
|
|
<h3 class="text-base font-medium text-gray-800 flex items-center gap-2 dark:text-primary-dt">
|
|
<GoogleIcon
|
|
class="text-black dark:text-primary-dt text-xl"
|
|
name="license"
|
|
/>
|
|
Certificaciones
|
|
</h3>
|
|
|
|
<div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-2">
|
|
<!-- Cert vigente -->
|
|
<article class="rounded-lg border border-gray-100 bg-green-50/40 p-4 relative dark:bg-success-d/10 dark:border-primary/20 dark:text-primary-dt">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">AWS Certified Solutions Architect</h4>
|
|
<p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">Amazon Web Services</p>
|
|
<p class="text-xs text-gray-500 mt-1 dark:text-primary-dt/70">Obtenida: 2023-05-15</p>
|
|
<p class="text-xs text-gray-500 dark:text-primary-dt/70">Vigencia: 2026-05-15</p>
|
|
</div>
|
|
|
|
<span class="ml-4 inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700 dark:bg-success-d dark:text-success-dt">
|
|
Vigente
|
|
</span>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Cert vencida -->
|
|
<article class="rounded-lg border border-gray-100 bg-white p-4 relative dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Certified ScrumMaster</h4>
|
|
<p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">Scrum Alliance</p>
|
|
<p class="text-xs text-gray-500 mt-1 dark:text-primary-dt/70">Obtenida: 2022-08-20</p>
|
|
<p class="text-xs text-gray-500 dark:text-primary-dt/70">Vigencia: 2024-08-20</p>
|
|
</div>
|
|
|
|
<span class="ml-4 inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-amber-100 text-amber-800 dark:bg-warning-d dark:text-warning-dt">
|
|
Vencida
|
|
</span>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Acciones al final de la tarjeta -->
|
|
<div class="mt-6 border-t border-gray-100 pt-4 flex gap-3 dark:border-primary/20">
|
|
<button class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<GoogleIcon
|
|
class="text-black dark:text-primary-dt text-xl"
|
|
name="add"
|
|
/>
|
|
Agregar Grado
|
|
</button>
|
|
|
|
<button class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<GoogleIcon
|
|
class="text-black dark:text-primary-dt text-xl"
|
|
name="add"
|
|
/>
|
|
Agregar Certificación
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template> |