Initial commit

src/App.tsx

@@ -1,5 +1,5 @@
 import { BarraSuperior } from "./BarraSuperior";
-import { ContenedorHorarios } from "./ContenedorHorarios/";
+import { ContenedorHorarios } from "./ContenedorHorarios/ContenedorHorarios";
 import { Wallpaper } from "./Wallpaper";
 import { Show } from "solid-js";
 import { css } from "aphrodite";

src/BarraSuperior.tsx

@@ -4,55 +4,55 @@ import { numWallpaper, setNumWallpaper } from "./Store";
 
 const totalWallpapers = 4;
 
+const e = StyleSheet.create({
+    contCambiador: {
+        userSelect: "none"
+    },
+    boton: {
+        cursor: "pointer",
+        textDecoration: "underline",
+        "::before": {
+            fontSize: "1rem",
+            transform: "translateY(0.2rem)"
+        }
+    },
+    botonDesactivado: {
+        cursor: "not-allowed",
+        textDecoration: "none"
+    },
+    botonLeft: {
+        paddingRight: "0.5rem",
+        marginRight: "0.25rem"
+    },
+    botonRight: {
+        paddingLeft: "0.5rem",
+        marginRight: "0.25rem"
+    }
+});
+
+const retrocederWallpaper = () => {
+    const num = numWallpaper();
+    if (num > 0) {
+        setNumWallpaper(num - 1);
+        localStorage.setItem("num-img", (num - 1).toString());
+    } else {
+        setNumWallpaper(totalWallpapers);
+        localStorage.setItem("num-img", (totalWallpapers).toString());
+    }
+};
+
+const avanzarWallpaper = () => {
+    const num = numWallpaper();
+    if (num < totalWallpapers) {
+        setNumWallpaper(num + 1);
+        localStorage.setItem("num-img", (num + 1).toString());
+    } else {
+        setNumWallpaper(0);
+        localStorage.setItem("num-img", (0).toString());
+    }
+};
+
 function CambiadorImg() {
-    const e = StyleSheet.create({
-        contCambiador: {
-            userSelect: "none"
-        },
-        boton: {
-            cursor: "pointer",
-            textDecoration: "underline",
-            "::before": {
-                fontSize: "1rem",
-                transform: "translateY(0.2rem)"
-            }
-        },
-        botonDesactivado: {
-            cursor: "not-allowed",
-            textDecoration: "none"
-        },
-        botonLeft: {
-            paddingRight: "0.5rem",
-            marginRight: "0.25rem"
-        },
-        botonRight: {
-            paddingLeft: "0.5rem",
-            marginRight: "0.25rem"
-        }
-    });
-
-    const retrocederWallpaper = () => {
-        const num = numWallpaper();
-        if (num > 0) {
-            setNumWallpaper(num - 1);
-            localStorage.setItem("num-img", (num - 1).toString());
-        } else {
-            setNumWallpaper(totalWallpapers);
-            localStorage.setItem("num-img", (totalWallpapers).toString());
-        }
-    };
-
-    const avanzarWallpaper = () => {
-        const num = numWallpaper();
-        if (num < totalWallpapers) {
-            setNumWallpaper(num + 1);
-            localStorage.setItem("num-img", (num + 1).toString());
-        } else {
-            setNumWallpaper(0);
-            localStorage.setItem("num-img", (0).toString());
-        }
-    };
-
     return <div className={css(estilosGlobales.inlineBlock, e.contCambiador)}>
         <span className={css(estilosGlobales.contenedor, estilosGlobales.inlineBlock)}>
             <i

src/ContenedorHorarios/Cursos.tsx

@@ -0,0 +1,30 @@
+import { AnioData } from "../types/DatosHorario";
+import { For } from "solid-js";
+import { StyleSheet, css } from "aphrodite";
+import { estilosGlobales } from "../Estilos";
+
+const e = StyleSheet.create({
+    contenedorCurso: {
+        display: "inline-block",
+
+    }
+});
+
+export function Cursos(props: { dataAnio: AnioData }) {
+    return <>
+        <For each={Object.entries(props.dataAnio)}>
+            {([_, datosCurso]) => {
+                return <span className={css(
+                    e.contenedorCurso,
+                    estilosGlobales.contenedor,
+                    estilosGlobales.contenedorCursor,
+                    estilosGlobales.contenedorCursorSoft
+                )}
+                >
+                    <i className="ph-plus"/>
+                    {datosCurso.abreviado} - {datosCurso.nombre}
+                </span>
+            }}
+        </For>
+    </>;
+}

src/ContenedorHorarios/Horarios.tsx

@@ -1,9 +1,9 @@
-import { AnioData, DatosHorario } from "../types/DatosHorario";
+import { DatosHorario } from "../types/DatosHorario";
 import { For, createSignal, createMemo } from "solid-js";
-import { StyleSheet, css } from "aphrodite";
+import { css } from "aphrodite";
 import { estilosGlobales } from "../Estilos";
 import { Tabla } from "./Tabla";
-import { horas } from "../Store";
+import { Cursos } from "./Cursos";
 
 export function Horarios(props: { data: DatosHorario }) {
 
@@ -38,5 +38,8 @@ export function Horarios(props: { data: DatosHorario }) {
         <div className={css(estilosGlobales.contenedor)}>
             <Tabla data={dataTabla()} version={props.data.version} anio={anioActual()}/>
         </div>
+        <div>
+            <Cursos dataAnio={dataTabla()}/>
+        </div>
     </div>;
 }