Cursos: nuevas etiquetas: fecha, edicion, boton de accion. Responsive…

… de etiquetas. JSON con cursos modificados: links y titulos
CyberAula · May 8, 2024 · 09b020e · 09b020e
1 parent 91f1f70
commit 09b020e
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 60 deletions.
diff --git a/app/courses/page.js b/app/courses/page.js
@@ -6,6 +6,8 @@ import Footer from "@/components/Footer";
 import Link from "next/link";
 // aquí habría que importar los cursos
 import { mycourses } from "@/constants/courses.js";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
 
 export default function Courses() {
   const [courses, setCourses] = useState(mycourses);
@@ -31,23 +33,33 @@ export default function Courses() {
                   key={title}
                   className={`rounded-lg px-6 py-4 course  ${gradient}`}
                 >
-
                   <div className="course_main transition">
-                    <CreateLink route={route}>
-                      <div className="course_content">
+                    <div className="course_content">
+                      <div className="card_container_top">
+                        <div className="flex gap-2">
                         <div className="year_tag">
-                          <p>{date}</p>
+                          <div>{date}</div>
                         </div>
-                        <div className="course_text_block">
-                          <div className="course_title">
-                            <h4>{title}</h4>
-                          </div>
-                          <div className="course_description">
-                           <small> {description}</small>
-                          </div>
+                        <div className="year_tag">
+                          <div> Primera edición</div>
+                        </div>
+                        </div>
+                        <div className="course_route">
+                        <CreateLink route={route}>
+                        <FontAwesomeIcon className="award_icon" icon={faArrowRight} />
+                          <div>Ir al curso</div>
+                        </CreateLink>
+                        </div>
+                      </div>
+                      <div className="course_text_block">
+                        <div className="course_title">
+                          <h4>{title}</h4>
+                        </div>
+                        <div className="course_description">
+                          <small> {description}</small>
                         </div>
                       </div>
-                    </CreateLink>
+                    </div>
                   </div>
                 </div>
               );

diff --git a/app/sass/partials/_courses.sass b/app/sass/partials/_courses.sass
@@ -22,23 +22,59 @@ $windowWidth: 100vw
                 -webkit-box-orient: vertical
                 overflow: hidden
                 text-overflow: ellipsis
-    .year_tag 
+    .card_container_top 
         display: flex
-        p
-            background-color: rgb(0, 0, 0,0.4)
-            justify-contet: flex-end
-            border-radius:20px
-            padding: 3px 8px 
-            font-size: 1em
-            font-weight: 400
-
+        justify-content: space-between 
+        height: 24px
+        font-size: 1rem
+        .year_tag 
+            display: flex
+            div
+                background-color: rgb(0, 0, 0,0.4)
+                display: flex
+                align-items: center
+                padding: 1px 8px 
+                font-weight: 500
+                border-radius: 24px
+        .course_route
+            border: 1px solid white
+            border-radius: 24px
+            padding: 0.2rem 0.8rem 0.6rem 0.8rem
+            a 
+                display: flex
+            svg
+                margin-top: 0.1rem
+            div
+                font-weight:400
+                font-size: 1rem
+                margin-left: 0.6rem
+
 @media (min-width: 770px)
     .course
         display: flex
         color: white
         font-weight: 400
         height: $windowHeight  /2.25
         overflow: hidden    
+        .card_container_top
+            height: 32px
+            align-items: center
+            div
+                font-size: 1rem
+            .year_tag 
+                div
+                    margin: auto
+                    padding: 6px 12px 
+                    border-radius:4px
+            .course_route
+                margin-top:2px
+                display: flex
+                align-items: center
+                padding: auto
+                svg
+                    margin-top: 0.2rem
+                div
+                    margin-top: 0.14rem
         .course_text_block
             transition: ease-in-out 300ms
             // transform: translateY(64%)

diff --git a/constants/courses.js b/constants/courses.js
@@ -9,73 +9,58 @@ export const mycourses = [
     {
 		"date": "2023",
 		"logo": "/assets/img/courses/fondo-cursos.png",
-		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=356",
-		"title": "Bases de Datos Relacionales y No Relacionales: conceptos, diseño y aplicación a entornos web",
+		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=378",
+		"title": "Desarrollo de aplicaciones con React y React Native",
 		"description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas.",
-        "gradient": "bg-purple-gradient"
+        "gradient": "bg-purple-gradient",
     },
     {
 		"date": "2023",
 		"logo": "/assets/img/courses/fondo-cursos.png",
-		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=356",
-		"title": "Bases de Datos Relacionales y No Relacionales: conceptos, diseño y aplicación a entornos web",
+		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=361",
+		"title": "Desarrollo de un Proyecto Fullstack con JavaScript",
 		"description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas. ",
 	    "gradient": "bg-blue-gradient",
 	},
     {
-		"date": "2023",
+		"date": "2021",
 		"logo": "/assets/img/courses/fondo-cursos.png",
-		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=356",
-		"title": "Bases de Datos Relacionales y No Relacionales: conceptos, diseño y aplicación a entornos web",
+		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=194",
+		"title": "Desarrollo Backend con Node.js, Express y BBDDs",
 		"description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas. ",
-		"gradient": "bg-purple-gradient"
+		"gradient": "bg-purple-gradient",
 	},
 	{
-		"date": "2023",
+		"date": "2021",
 		"logo": "/assets/img/courses/fondo-cursos.png",
-		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=356",
-		"title": "Bases de Datos Relacionales y No Relacionales: conceptos, diseño y aplicación a entornos web",
+		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=256",
+		"title": "Desarrollo Frontend con HTML, CSS y JavaScript",
 		"description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas. ",
 		"gradient": "bg-blue-gradient",
 	},
 	{
-		"date": "2023",
+		"date": "2021",
 		"logo": "/assets/img/courses/fondo-cursos-png",
-		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=356",
-		"title": "Bases de Datos Relacionales y No Relacionales: conceptos, diseño y aplicación a entornos web",
+		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=267",
+		"title": "Gestión de proyectos software con Git y GitHub",
 		"description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas. ",
 		"gradient": "bg-blue-gradient",
 	},
     {
-		"date": "2023",
+		"date": "2021",
 		"logo": "/assets/img/courses/fondo-cursos.png",
-		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=356",
-		"title": "Bases de Datos Relacionales y No Relacionales: conceptos, diseño y aplicación a entornos web",
+		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=264",
+		"title": "Siete habilidades clave en la era digital",
 		"description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas. ",
-		"gradient": "bg-purple-gradient"	
+		"gradient": "bg-purple-gradient",
 	},
     {
-		"date": "2023",
-		"logo": "/assets/img/courses/fondo-cursos-png",
-		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=356",
-		"title": "Bases de Datos Relacionales y No Relacionales: conceptos, diseño y aplicación a entornos web",
-		"description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas. ",
-		"gradient": "bg-purple-gradient"
-	},
-    {
-		"date": "2023",
+		"date": "2018",
 		"logo": "/assets/img/courses/fondo-cursos-png",
-		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=356",
-		"title": "Bases de Datos Relacionales y No Relacionales: conceptos, diseño y aplicación a entornos web",
-		"description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas. ",
-		"gradient": "bg-purple-gradient"
-	},
-
-    {	"date": "2023",
-		"logo": "/assets/img/courses/fondo-cursos-png",
-		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=356",
-		"title": "Bases de Datos Relacionales y No Relacionales: conceptos, diseño y aplicación a entornos web",
+		"route": "https://innovacioneducativa.upm.es/mooc/informacion-mooc?idmooc=51",
+		"title": "Introducción a LINUX como entorno de desarrollo de sistemas software",
 		"description": "En este curso, exploraremos los fundamentos esenciales de las bases de datos, centrándonos tanto en los modelos relacionales como en los no relacionales. Desde la teoría básica hasta la aplicación práctica en entornos web, los participantes adquirirán una comprensión profunda de cómo diseñar, implementar y gestionar bases de datos eficientes para satisfacer las necesidades cambiantes de las aplicaciones modernas. ",
-		"gradient": "bg-blue-gradient",
+		"gradient": "bg-purple-gradient",
+
 	},
 ];