Skip to content

Commit

Permalink
estilo de curso mejorado
Browse files Browse the repository at this point in the history
  • Loading branch information
@alex-roc
alex-roc committed Sep 19, 2024
1 parent 919dc33 commit ee5c263
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 332 deletions.
18 changes: 1 addition & 17 deletions src/components/Footer.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,7 @@ import { Input } from "@/components/ui/input";

<footer class="bg-slate-50 text-gray-900 py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div></div>
<!-- <div>
<h3 class="text-lg font-semibold mb-4">Lista de correo</h3>
<p class="text-sm mb-2">
Suscribite a nuestra lista de correo para recibir las últimas noticias
</p>
<form class="flex">
<Input
type="email"
placeholder="Your email"
className="rounded-r-none"
/>
<Button type="submit" className="rounded-l-none">Subscribe</Button>
</form>
</div>
</div> -->
<div class="grid grid-cols-1 gap-8">
<div class="mt-8 pt-4 border-t border-gray-700 text-center text-sm">
Administrado por el <a
class="text-[#00DA77] hover:underline"
Expand Down
134 changes: 68 additions & 66 deletions src/components/curso/Curso.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,78 +3,80 @@ import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
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 } from 'lucide-react'
import { ArrowLeft, Calendar, Clock, Users, LibraryBig } from 'lucide-react'

import type { Curso as TCurso } from '@/data/cursosTypes';

export default function Curso({ curso }: { curso: TCurso }) {

return (
<main className="container mx-auto py-8 max-w-4xl">
<Button variant="ghost" className="mb-4" asChild >
<a href="/catalogo">
<ArrowLeft className="mr-2 h-4 w-4" /> Vuelve al catalogo
</a>
</Button>

<Card className="mb-8">
<CardHeader>
<img src={'/images/' + curso.imagen} alt={curso.titulo} className="w-full h-64 object-cover rounded-t-lg" />
<CardTitle className="text-3xl mt-4">{curso.titulo}</CardTitle>
<CardDescription><b>Competencia:</b> {curso.competencia}</CardDescription>
</CardHeader>
<CardContent>
<div className="flex flex-wrap gap-4 mb-4">
<Badge variant="secondary" className="flex items-center">
<Clock className="mr-1 h-4 w-4" /> { }
</Badge>
<Badge variant="secondary" className="flex items-center">
<Calendar className="mr-1 h-4 w-4" /> { }
</Badge>
<Badge variant="secondary" className="flex items-center">
<Users className="mr-1 h-4 w-4" /> { } inscritos
</Badge>
</div>

<Tabs defaultValue="curriculum">
<TabsList>
<TabsTrigger value="curriculum">Contenido</TabsTrigger>
<TabsTrigger value="instructor">Docente</TabsTrigger>
</TabsList>
<TabsContent value="curriculum">
<ol className="list-decimal pl-5 space-y-2">
{curso.contenidos.map((item, index) => (
<>
<li key={index}>{item.titulo}</li>
{item.subtitulos && (
<ul className="list-disc pl-5 space-y-2">
{item.subtitulos.map((subitem, subindex) => (
<li key={subindex}>{subitem}</li>
))}
</ul>
)}
</>
))}
</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>
<main>
<img src={'/images/' + curso.imagen} alt={curso.titulo} className="w-full h-72 object-cover" />
<div className="container mx-auto py-8 max-w-4xl">
<h1 className="text-3xl font-title text-center px-4">{curso.titulo}</h1>
<h2 className="font-body my-2 px-4"><b>Competencia:</b> {curso.competencia}</h2>
<Card className="font-body">
<CardContent>
<div className="flex flex-wrap gap-4 my-4 justify-center">
<Badge variant="secondary" className="flex items-center">
<Clock className="mr-1 h-4 w-4" /> { }
</Badge>
<Badge variant="secondary" className="flex items-center">
<Calendar className="mr-1 h-4 w-4" /> { }
</Badge>
<Badge variant="secondary" className="flex items-center">
<Users className="mr-1 h-4 w-4" /> { } inscritos
</Badge>
</div>
<Tabs defaultValue="curriculum" >
<TabsList className="flex justify-center">
<TabsTrigger value="curriculum">Contenido</TabsTrigger>
<TabsTrigger value="instructor">Docente</TabsTrigger>
</TabsList>
<TabsContent value="curriculum">
<ol className="list-decimal pl-5 space-y-2">
{curso.contenidos.map((item, index) => (
<>
<li key={index}>{item.titulo}</li>
{item.subtitulos && (
<ul className="list-disc pl-5 space-y-2">
{item.subtitulos.map((subitem, subindex) => (
<li key={subindex}>{subitem}</li>
))}
</ul>
)}
</>
))}
</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>
</div>
</TabsContent>
</Tabs>
</CardContent>
<CardFooter>
<Button className="w-full">
Inscribirse
</Button>
</CardFooter>
</Card>
</TabsContent>
</Tabs>
</CardContent>
<CardFooter>
<Button className="w-40 mx-auto p-6">
Inscribirse
</Button>
</CardFooter>
</Card>
</div>
<div className="flex justify-center">
<Button variant="ghost" className="mb-4" asChild >
<a href="/catalogo">
<LibraryBig className="mr-2 h-4 w-4" /> Ver todos los cursos
</a>
</Button>
</div>

</main>
)
}
Loading

0 comments on commit ee5c263

Please sign in to comment.