1+ interface PreExam {
2+ id : string ;
3+ title : string ;
4+ description : string ;
5+ dates : string [ ] ;
6+ materials : {
7+ name : string ;
8+ url : string ;
9+ type : 'pdf' | 'ppt' | 'doc' | 'link' ;
10+ } [ ] ;
11+ topics : string [ ] ;
12+ }
13+
14+ const preExams : PreExam [ ] = [
15+ {
16+ id : "1" ,
17+ title : "Taller: Introducción a la Programación" ,
18+ description : "Conceptos fundamentales de programación y lógica computacional." ,
19+ dates : [ "23 de Agosto, 2023" , "8 de Noviembre, 2023" , "4 de Marzo, 2025" , "7 de Abril, 2025" , "19 de Mayo, 2025" ] ,
20+ materials : [
21+ {
22+ name : "Slides - Parcial No. 1" ,
23+ url : "https://drive.google.com/file/d/1gWnlsfQTYN-qMi2M9cEa5l2Qz2W6dsdv/view?usp=drive_link" ,
24+ type : "ppt"
25+ } ,
26+ {
27+ name : "Simulacro - Parcial No. 2" ,
28+ url : "https://drive.google.com/file/d/150yucdufPKI1WpLxzlGUFbTf4tMgzDcX/view?usp=drive_link" ,
29+ type : "pdf"
30+ } ,
31+ {
32+ name : "Simulacro - Parcial No. 3" ,
33+ url : "https://drive.google.com/file/d/1euu3OwXiu4OtuOYg4N4A9fZDv-IAkui2/view?usp=drive_link" ,
34+ type : "pdf"
35+ }
36+ ] ,
37+ topics : [ "Variables" , "Estructuras de control" , "Funciones" , "Arrays" , "C++" ]
38+ } ,
39+ {
40+ id : "2" ,
41+ title : "Taller: Programación Avanzada" ,
42+ description : "Técnicas avanzadas de programación e introducción al paradigma orientado a objetos." ,
43+ dates : [ "8 de Noviembre, 2023" , "20 de Marzo, 2025" , "19 de Mayo, 2025" ] ,
44+ materials : [
45+ {
46+ name : "Simulacro - Parcial No. 1" ,
47+ url : "https://drive.google.com/file/d/1sHX0NrQoqPfqF0VriHFbTZArsQ84DGYz/view?usp=drive_link" ,
48+ type : "pdf"
49+ } ,
50+ {
51+ name : "Slides - Parcial No. 2" ,
52+ url : "https://drive.google.com/file/d/1tkwQnNmzPcSGHb58dqekBJBxaq_7sLm3/view?usp=drive_link" ,
53+ type : "ppt"
54+ } ,
55+ {
56+ name : "Simulacro - Parcial No. 2" ,
57+ url : "https://drive.google.com/file/d/1oywoalikehnSqVLAYtni-kxqndmZFktM/view?usp=drive_link" ,
58+ type : "pdf"
59+ } ,
60+ {
61+ name : "Slides - Parcial No. 3" ,
62+ url : "https://drive.google.com/file/d/1fdLJsQBw3hNAATq3Z65aj6MM_R7vg0QY/view?usp=drive_link" ,
63+ type : "ppt"
64+ }
65+ ] ,
66+ topics : [ "POO" , "Apuntadores" , "Manejo de errores" , "Java" , "C++" ]
67+ } ,
68+ {
69+ id : "3" ,
70+ title : "Taller: Estructuras de Datos" ,
71+ description : "Implementación y uso de estructuras de datos fundamentales para resolver problemas complejos." ,
72+ dates : [ "29 de Febrero, 2025" , "9 de Abril, 2025" , "29 de Mayo, 2025" ] ,
73+ materials : [
74+ {
75+ name : "Simulacro - Parcial No. 2" ,
76+ url : "https://drive.google.com/file/d/1p9_xnDmhrYLXkz-1jybUHx_rgb-dnOMo/view?usp=drive_link" ,
77+ type : "pdf"
78+ } ,
79+ {
80+ name : "Solución Simulacro - Parcial No. 2" ,
81+ url : "https://drive.google.com/file/d/1Bs1gWolsEWe0zTA4Ecpf3bnHYhfiyUB2/view?usp=drive_link" ,
82+ type : "pdf"
83+ } ,
84+ {
85+ name : "Simulacro (presencial) - Parcial No. 3" ,
86+ url : "https://drive.google.com/file/d/1gqrUUhCenLDZxbGtxcQ7iheBy5I4BaIg/view?usp=drive_linkk" ,
87+ type : "pdf"
88+ } ,
89+ {
90+ name : "Simulacro (virtual) - Parcial No. 3" ,
91+ url : "https://drive.google.com/file/d/1H3fIQTNZgWYw0DVlFCs-2gOzXJ5yDYdn/view?usp=drive_link" ,
92+ type : "pdf"
93+ } ,
94+ ] ,
95+ topics : [ "STL" , "Árboles" , "Grafos" , "C++" ]
96+ }
97+ ] ;
98+
99+ export function PreExamsContent ( ) {
100+ return (
101+ < div className = "max-w-7xl mx-auto p-6 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-lg" >
102+ < div className = "space-y-8" >
103+ { preExams . map ( ( preExam ) => (
104+ < div key = { preExam . id } className = "bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden" >
105+ { /* Header */ }
106+ < div className = "p-6 border-b border-gray-200 dark:border-gray-700" >
107+ < h3 className = "text-2xl font-semibold text-gray-900 dark:text-white mb-2" >
108+ { preExam . title }
109+ </ h3 >
110+ < div className = "flex flex-wrap items-center gap-2" >
111+ < span className = "text-gray-600 dark:text-gray-400 text-sm" > 📅 Fechas:</ span >
112+ { preExam . dates . map ( ( date , index ) => (
113+ < span
114+ key = { index }
115+ className = "px-2 py-1 bg-blue-50 dark:bg-blue-900 text-blue-700 dark:text-blue-300 text-xs rounded-md"
116+ >
117+ { date }
118+ </ span >
119+ ) ) }
120+ </ div >
121+ </ div >
122+
123+ { /* Description */ }
124+ < div className = "p-6" >
125+ < p className = "text-gray-700 dark:text-gray-300 mb-6 leading-relaxed" >
126+ { preExam . description }
127+ </ p >
128+
129+ { /* Topics */ }
130+ < div className = "mb-6" >
131+ < h4 className = "text-lg text-gray-900 dark:text-white mb-3" >
132+ 🎯 Temas Cubiertos
133+ </ h4 >
134+ < div className = "flex flex-wrap gap-2" >
135+ { preExam . topics . map ( ( topic , index ) => (
136+ < span
137+ key = { index }
138+ className = "px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full text-sm font-medium"
139+ >
140+ { topic }
141+ </ span >
142+ ) ) }
143+ </ div >
144+ </ div >
145+
146+ { /* Materials */ }
147+ < div >
148+ < h4 className = "text-lg text-gray-900 dark:text-white mb-3" >
149+ 📁 Material Utilizado
150+ </ h4 >
151+ < div className = "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3" >
152+ { preExam . materials . map ( ( material , index ) => (
153+ < a
154+ key = { index }
155+ href = { material . url }
156+ target = "_blank"
157+ className = "flex items-center p-3 no-underline bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 group min-w-0"
158+ >
159+ < div className = "flex-shrink-0 mr-3" >
160+ { material . type === 'pdf' && (
161+ < svg className = "w-6 h-6 text-red-500" fill = "currentColor" viewBox = "0 0 20 20" >
162+ < path fillRule = "evenodd" d = "M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clipRule = "evenodd" />
163+ </ svg >
164+ ) }
165+ { material . type === 'ppt' && (
166+ < svg className = "w-6 h-6 text-orange-500" fill = "currentColor" viewBox = "0 0 20 20" >
167+ < path fillRule = "evenodd" d = "M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clipRule = "evenodd" />
168+ </ svg >
169+ ) }
170+ { material . type === 'doc' && (
171+ < svg className = "w-6 h-6 text-blue-500" fill = "currentColor" viewBox = "0 0 20 20" >
172+ < path fillRule = "evenodd" d = "M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clipRule = "evenodd" />
173+ </ svg >
174+ ) }
175+ { material . type === 'link' && (
176+ < svg className = "w-6 h-6 text-green-500" fill = "currentColor" viewBox = "0 0 20 20" >
177+ < path fillRule = "evenodd" d = "M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5a2 2 0 112.828 2.828l-1.5 1.5a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l1.5-1.5a4 4 0 00-5.656-5.656l-3 3a4 4 0 00-.586 5.414z" clipRule = "evenodd" />
178+ </ svg >
179+ ) }
180+ </ div >
181+ < div className = "flex-1 min-w-0 overflow-hidden" >
182+ < p className = "text-sm font-medium text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 truncate" >
183+ { material . name }
184+ </ p >
185+ < p className = "text-xs text-gray-500 dark:text-gray-400 capitalize truncate" >
186+ { material . type }
187+ </ p >
188+ </ div >
189+ < svg className = "w-4 h-4 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300" fill = "none" stroke = "currentColor" viewBox = "0 0 24 24" >
190+ < path strokeLinecap = "round" strokeLinejoin = "round" strokeWidth = { 2 } d = "M9 5l7 7-7 7" />
191+ </ svg >
192+ </ a >
193+ ) ) }
194+ </ div >
195+ </ div >
196+ </ div >
197+ </ div >
198+ ) ) }
199+ </ div >
200+
201+ { /* Call to Action */ }
202+ < div className = "mt-8 text-center" >
203+ < p className = "text-gray-600 dark:text-gray-400 mb-4" >
204+ ¿Te interesa participar en nuestros próximos preparciales?
205+ </ p >
206+ < a
207+ href = "https://www.instagram.com/acmjaveriana"
208+ target = "_blank"
209+ className = "no-underline bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white hover:text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200" >
210+ 📝 Inscribirse en Próximos Talleres
211+ </ a >
212+ </ div >
213+ </ div >
214+ ) ;
215+ }
0 commit comments