Jeremias

frontend/angular/public/i18n/en.json

@@ -8,6 +8,7 @@
     "terminal": "Terminal",
     "chat": "Chat",
     "myLearning": "My Learning",
+    "createCourse": "Create Course",
     "language": "Language"
   },
   "HOME": {

frontend/angular/public/i18n/es.json

@@ -8,6 +8,7 @@
     "terminal": "Terminal",
     "chat": "Chat",
     "myLearning": "Mi aprendizaje",
+    "createCourse": "Crear curso",
     "language": "Idioma"
   },
   "HOME": {

frontend/angular/public/i18n/qu.json

@@ -8,6 +8,7 @@
     "terminal": "Terminal",
     "chat": "Rimanakuy",
     "myLearning": "Ñuqa yachachiyki",
+    "createCourse": "Cursota Paqarichiy",
     "language": "Rimay"
   },
   "HOME": {

frontend/angular/src/app/app.routes.ts

@@ -13,6 +13,7 @@ import { CursosComponent } from './pages/cursos/cursos.component';
 import { IntroductionComponent } from './pages/introduction/introduction.component';
 import { ChatComponent } from './pages/chat/chat.component';
 import { CreateCourseComponent } from './pages/create-course/create-course.component';
+import { EditCourseComponent } from './pages/edit-course/edit-course.component';
 
 export const routes: Routes = [
   { path: '', component: HomeComponent },
@@ -29,6 +30,7 @@ export const routes: Routes = [
   { path: 'lista-cursos', component: CoursesListComponent },
   { path: 'terminal', component: TerminalComponent },
   { path: 'cursos/:id', component: IntroductionComponent },
+  { path: 'editar-curso/:id', component: EditCourseComponent },
   { path: 'chat', component: ChatComponent },
   { path: 'crear-curso', component: CreateCourseComponent },
 

frontend/angular/src/app/components/card-curso/card-curso.component.html

@@ -1,4 +1,16 @@
 <div class="card" [routerLink]="['/cursos', content.goto]">
-  <h3 class="card-title">{{ content.title }}</h3>
+  <div class="card-header">
+    <h3 class="card-title">{{ content.title }}</h3>
+
+    <!-- Botón de editar -->
+    <button
+      class="edit-button"
+      (click)="onEdit($event)"
+      title="Editar curso"
+    >
+      <i class="fas fa-edit"></i>
+    </button>
+  </div>
+
   <p class="card-description">{{ content.description }}</p>
 </div>

frontend/angular/src/app/components/card-curso/card-curso.component.scss

@@ -1,25 +1,69 @@
+@use "sass:color"; // solo necesario si usás funciones como color.adjust
+
+// Variables locales de color (copiadas de tu diseño original)
+$primary-color: #4346ff;
+$secondary-color: #ff6a81;
+$background-dark: #000000;
+$background-light: #272149;
+$text-light: #ffffff;
+$text-muted: rgba(255, 255, 255, 0.8);
+$card-bg: rgba(255, 255, 255, 0.05);
+$card-border: rgba(255, 255, 255, 0.1);
+$error-color: #f44336;
+
 .card {
-  background-color: #222;
+  background-color: $card-bg;
+  border: 1px solid $card-border;
   border-radius: 12px;
-  color: #ccc;
-  padding: 1rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: 100%;
-  width: 100%; 
-  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
-}
+  padding: 20px;
+  position: relative;
+  transition: all 0.3s ease;
+  color: $text-light;
 
-.card-title {
-  font-size: 1.2rem;
-  margin: 0;
-}
+  &:hover {
+    background-color: rgba($primary-color, 0.05);
+  }
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 
-.card-description {
-  font-size: 0.9rem;
-  margin: 0;
+  .card-title {
+    font-size: 1.5rem;
+    margin: 0;
+    background: linear-gradient(45deg, $primary-color, $secondary-color);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .card-description {
+    margin-top: 12px;
+    font-size: 1rem;
+    color: $text-muted;
+  }
+
+  .edit-button {
+    background: transparent;
+    border: none;
+    color: $primary-color;
+    font-size: 1.2rem;
+    cursor: pointer;
+    padding: 6px;
+    border-radius: 50%;
+    transition: background 0.3s;
+
+    &:hover {
+      background: rgba($primary-color, 0.15);
+    }
+
+    i {
+      pointer-events: none;
+    }
+  }
 }
 
 
+
 //poner buenos estilos :v 

frontend/angular/src/app/components/card-curso/card-curso.component.ts

@@ -1,16 +1,24 @@
 import { Component, Input } from '@angular/core';
+import { Router } from '@angular/router';
+import { ICardCurso } from '../../shared/interfaces/interfaces';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
-import { ICardCurso } from '../../shared/interfaces/interfaces';
 import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-card-curso',
+  standalone: true,
   imports: [MatCardModule, MatButtonModule, RouterModule],
   templateUrl: './card-curso.component.html',
-  standalone: true,
   styleUrl: './card-curso.component.scss',
 })
 export class CardCursoComponent {
   @Input() content!: ICardCurso;
+
+  constructor(private router: Router) {}
+
+  onEdit(event: MouseEvent) {
+    event.stopPropagation(); // Evita que también se dispare el routerLink general
+    this.router.navigate(['/editar-curso', this.content.id]);
+  }
 }