cambio modelo de cursos

lab-tecnosocial · Sep 20, 2024 · 8c70604 · 8c70604
1 parent ee5c263
commit 8c70604
Show file tree

Hide file tree

Showing 10 changed files with 288 additions and 112 deletions.
diff --git a/public/images/abigail-roque.webp b/public/images/abigail-roque.webp
diff --git a/public/images/alex-ojeda.webp b/public/images/alex-ojeda.webp
diff --git a/public/images/javier-olmos.webp b/public/images/javier-olmos.webp
diff --git a/public/images/patricia-delgadillo.webp b/public/images/patricia-delgadillo.webp
diff --git a/public/images/valeria-peredo.webp b/public/images/valeria-peredo.webp
diff --git a/src/components/Catalogo.tsx b/src/components/Catalogo.tsx
@@ -9,14 +9,14 @@ import data from "@/data/cursos.json";
 import type { Curso as TCurso } from "@/data/cursosTypes";
 const courses = data as TCurso[];
 
-const categories = ["Todos", ...new Set(courses.map(course => course.categoria))]
+const etiquetas = ["Todos", ...new Set(courses.flatMap(course => course.etiquetas))]
 
 export function Catalogo() {
-  const [selectedCategory, setSelectedCategory] = useState("Todos")
+  const [selectedEtiqueta, setSelectedEtiqueta] = useState("Todos")
   const [searchTerm, setSearchTerm] = useState("")
 
   const filteredCourses = courses.filter(course =>
-    (selectedCategory === "Todos" || course.categoria === selectedCategory) &&
+    (selectedEtiqueta === "Todos" || course.etiquetas.includes(selectedEtiqueta)) &&
     course.titulo.toLowerCase().includes(searchTerm.toLowerCase())
   )
 
@@ -26,13 +26,13 @@ export function Catalogo() {
         <h2 className="font-title text-3xl font-bold mb-8 text-center">Nuestros cursos</h2>
         {/* Filter and Search */}
         <div className="flex flex-col justify-between items-center mb-8 space-y-4">
-          <Select value={selectedCategory} onValueChange={setSelectedCategory}>
+          <Select value={selectedEtiqueta} onValueChange={setSelectedEtiqueta}>
             <SelectTrigger className="font-body w-full sm:w-[300px]">
-              <SelectValue placeholder="Seleccionar categoría" />
+              <SelectValue placeholder="Seleccionar etiqueta" />
             </SelectTrigger>
             <SelectContent className="font-body">
-              {categories.map(category => (
-                <SelectItem key={category} value={category}>{category}</SelectItem>
+              {etiquetas.map(etiqueta => (
+                <SelectItem key={etiqueta} value={etiqueta}>{etiqueta}</SelectItem>
               ))}
             </SelectContent>
           </Select>
@@ -57,7 +57,13 @@ export function Catalogo() {
               </CardHeader>
               <CardContent>
                 <CardTitle className="font-title">{course.titulo}</CardTitle>
-                <Badge variant="outline" className="text-primary-normal font-body font-thin">{course.categoria}</Badge>
+                <div className="flex justify-center gap-1 mt-1">
+                  {
+                    course.etiquetas.map((etiqueta, index) => (
+                      <Badge key={index} variant="outline" className="text-primary-normal font-body font-thin">{etiqueta}</Badge>
+                    ))
+                  }
+                </div>
               </CardContent>
               <CardFooter>
                 <Button className="w-40 mx-auto" asChild>

diff --git a/src/components/curso/Curso.tsx b/src/components/curso/Curso.tsx
@@ -1,9 +1,9 @@
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Badge } from "@/components/ui/badge"
 import { ArrowLeft, Calendar, Clock, Users, LibraryBig } from 'lucide-react'
+import Docente from './Docente'
 
 import type { Curso as TCurso } from '@/data/cursosTypes';
 
@@ -31,7 +31,7 @@ export default function Curso({ curso }: { curso: TCurso }) {
             <Tabs defaultValue="curriculum" >
               <TabsList className="flex justify-center">
                 <TabsTrigger value="curriculum">Contenido</TabsTrigger>
-                <TabsTrigger value="instructor">Docente</TabsTrigger>
+                <TabsTrigger value="instructor">Docentes</TabsTrigger>
               </TabsList>
               <TabsContent value="curriculum">
                 <ol className="list-decimal pl-5 space-y-2">
@@ -50,15 +50,11 @@ export default function Curso({ curso }: { curso: TCurso }) {
                 </ol>
               </TabsContent>
               <TabsContent value="instructor">
-                <div className="flex items-center space-x-4 mb-4">
-                  <Avatar>
-                    <AvatarImage src={'/images/' + curso.docente.foto} alt={curso.docente.nombre} />
-                  </Avatar>
-                  <div>
-                    <h3 className="font-semibold">{curso.docente.nombre}</h3>
-                    <p className="text-sm text-gray-500">{curso.docente.bio}</p>
-                  </div>
-                </div>
+                {
+                  curso.docentes.map((docente, index) => (
+                    <Docente key={index} nombre={docente.nombre} foto={docente.foto} bio={docente.bio} />
+                  ))
+                }
               </TabsContent>
             </Tabs>
           </CardContent>

diff --git a/src/components/curso/Docente.tsx b/src/components/curso/Docente.tsx
@@ -0,0 +1,23 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+
+type Docente = {
+    nombre: string;
+    foto: string;
+    bio: string;
+};
+
+function Docente({ nombre, foto, bio }: Docente) {
+    return (
+        <div className="flex items-center space-x-4 mb-4">
+            <Avatar>
+                <AvatarImage src={'/images/' + foto} alt={nombre} />
+            </Avatar>
+            <div>
+                <h3 className="font-semibold">{nombre}</h3>
+                <p className="text-sm text-gray-500">{bio}</p>
+            </div>
+        </div>
+    )
+}
+
+export default Docente