Pestañas » Reseñas

1. Estructura Inicial

Encabezado y diseño básico

Creamos un encabezado para la sección:

<h3 class="text-3xl font-bold">Comentarios de los estudiantes</h3>

Utilizamos un contenedor Flex para los elementos principales:

<div class="flex gap-4 items-center">
    <div>
        <p class="text-xl font-semibold">4.6</p>
        <div class="flex items-center gap-1">
            <!-- Iconos de estrellas -->
        </div>
        <p class="text-sm text-gray-600">Valoración del curso</p>
    </div>
</div>

Añadimos un SVG para las estrellas, asegurándonos de incluir medios íconos si es necesario. Por ejemplo:
```
<svg class="text-yellow-400">...</svg>
```

2. Barras de progreso para las valoraciones

Implementación de barras dinámicas:

Reutilizamos la estructura de barras de progreso de otras secciones:

<div class="w-full bg-gray-300 rounded">
    <div class="bg-yellow-400 h-2 rounded" style="width: 56%;"></div>
</div>

Creamos una lista para cada valoración:

<div class="flex items-center gap-4">
    <p class="text-sm">5 estrellas</p>
    <div class="w-full bg-gray-300 rounded">
        <div class="bg-yellow-400 h-2 rounded" style="width: 80%;"></div>
    </div>
    <p class="text-sm text-gray-500">80%</p>
</div>

Ajustamos dinámicamente las barras y porcentajes según los datos.

3. Comentarios de los estudiantes

Diseño básico de un comentario:

Creamos un contenedor para cada comentario:

<div class="border p-4 rounded-lg">
    <h4 class="font-semibold">Víctor Manuel</h4>
    <div class="flex items-center gap-2">
        <!-- Estrellas -->
        <p class="text-gray-600 text-sm">Hace una semana</p>
    </div>
    <p class="text-sm text-gray-800 mt-2">"Excelente curso, aprendí mucho y fue muy claro."</p>
</div>

Añadimos botones de interacción:

<div class="flex items-center gap-4 mt-4">
    <button class="underline text-sm">Denunciar</button>
    <button class="border border-primary rounded-full px-4 py-2 text-primary">Responder</button>
</div>

4. Funcionalidad Dinámica con Alpine.js

Implementamos la funcionalidad de desplegar comentarios largos:

<div x-data="{ expanded: false }">
    <p class="truncate" x-bind:class="expanded ? 'line-clamp-none' : 'line-clamp-3'">
        "Comentario completo del estudiante que puede ser largo y se recorta cuando no está expandido."
    </p>
    <button @click="expanded = !expanded" class="text-blue-500 mt-2">
        <span x-show="!expanded">Ver más</span>
        <span x-show="expanded">Ver menos</span>
    </button>
</div>

Añadimos gradientes para transiciones suaves:

<div class="relative">
    <div class="absolute bottom-0 h-12 bg-gradient-to-t from-white to-transparent w-full"></div>
</div>

5. Buscador y filtros de reseñas

Barra de búsqueda:

Creamos una barra de búsqueda funcional:

<div class="flex items-center gap-4">
    <input type="text" placeholder="Buscar reseñas" class="border p-2 w-full rounded">
    <button class="bg-primary text-white px-4 py-2 rounded">Buscar</button>
</div>

Filtros de valoraciones:

Añadimos un selector para filtrar:

<select class="border p-2 rounded">
    <option value="">Todas las valoraciones</option>
    <option value="5">5 estrellas</option>
    <option value="4">4 estrellas</option>
    <option value="3">3 estrellas</option>
</select>

¡Obtén acceso a todos los cursos!