import React, { useState, useRef } from «react»;
// GuiaDidactica.jsx
// Componente React listo para integrar en una web (Next.js, CRA, Vite…)
// Usa TailwindCSS para estilos (no se importan estilos aquí).
export default function GuiaDidactica({ initial = null }) {
// Estructura de ejemplo (se usa si no llega prop «initial»)
const ejemplo = {
titulo: «Guía didáctica: Energía y sus transformaciones»,
profesor: «Dra. María González»,
nivel: «3º ESO»,
duracion: «2 sesiones (90 min)»,
descripcion:
«Introducción a la energía: tipos, conservación y ejemplos cotidianos. Actividades prácticas y evaluación.»,
objetivos: [
«Comprender el concepto de energía»,
«Diferenciar tipos de energía»,
«Aplicar la ley de conservación en problemas sencillos»,
],
recursos: [
{ tipo: «Documento», titulo: «Ficha actividad», url: «#» },
{ tipo: «Video», titulo: «Experimento en casa», url: «#» },
],
evaluacion:
«Observación de la actividad práctica + cuestionario de 10 preguntas (mínimo 6/10)»,
notas: «Ajustar actividades según nivel del grupo.»,
};
const [guia, setGuia] = useState(initial || ejemplo);
const [editing, setEditing] = useState(false);
const [newObj, setNewObj] = useState(«»);
const [newResTitulo, setNewResTitulo] = useState(«»);
const [newResTipo, setNewResTipo] = useState(«»);
const printRef = useRef(null);
function handleChange(e) {
const { name, value } = e.target;
setGuia((g) => ({ …g, [name]: value }));
}
function addObjetivo() {
if (!newObj.trim()) return;
setGuia((g) => ({ …g, objetivos: […(g.objetivos || []), newObj.trim()] }));
setNewObj(«»);
}
function addRecurso() {
if (!newResTitulo.trim()) return;
setGuia((g) => ({
…g,
recursos: […(g.recursos || []), { tipo: newResTipo || «Otro», titulo: newResTitulo.trim(), url: «#» }],
}));
setNewResTitulo(«»);
setNewResTipo(«»);
}
function removeObjetivo(i) {
setGuia((g) => ({ …g, objetivos: g.objetivos.filter((_, idx) => idx !== i) }));
}
function removeRecurso(i) {
setGuia((g) => ({ …g, recursos: g.recursos.filter((_, idx) => idx !== i) }));
}
function downloadJSON() {
const blob = new Blob([JSON.stringify(guia, null, 2)], { type: «application/json» });
const url = URL.createObjectURL(blob);
const a = document.createElement(«a»);
a.href = url;
a.download = (guia.titulo || «guia»).replace(/\s+/g, «_») + «.json»;
a.click();
URL.revokeObjectURL(url);
}
function printGuia() {
// Imprime la sección de vista previa
if (!printRef.current) return;
const originalTitle = document.title;
const printContents = printRef.current.innerHTML;
const win = window.open(«», «_blank», «width=900,height=700»);
if (!win) return alert(«Permite ventanas emergentes para imprimir.»);
win.document.write(`
${guia.titulo}`);
// Puedes incluir aquí el CSS de Tailwind (CDN) si quieres imprimir con estilos
win.document.write(««);
win.document.write(««);
win.document.write(printContents);
win.document.write(««);
win.document.close();
win.focus();
setTimeout(() => { win.print(); win.close(); }, 300);
document.title = originalTitle;
}
return (
{/* Panel de edición */}
{editing && (
)}
{/* Panel de presentación / preview */}
{guia.titulo}
Profesor/a: {guia.profesor} • Nivel: {guia.nivel}
{guia.descripcion}
Objetivos
{(guia.objetivos || []).map((o, i) => (
- {o}
))}
Recursos
{(guia.recursos || []).map((r, i) => (
-
{r.tipo}
))}
Evaluación
{guia.evaluacion}
{guia.notas && (
Notas: {guia.notas}
)}
);
}
